DioxusLabs / DioxusLabs/dioxus

Dioxus Router’s `on_update` callback is not called when using browser’s back/forward buttons

Open
#1,657 2 comments 0 reactions 1 assignee Claimed by @matthunz View on GitHub
bug router
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

**Problem**

Router's `on_update` callback is not called when going back or forward using the browser's buttons, it only works when you click on links.

**Steps To Reproduce**

- Create a project using the code below
- In terminal `dx serve`
- In browser go to `localhost:8080`
- Open developer tools > console
- Click on a link – notice the message works: "--- route update ---"
- Go back using the browser key – notice no message now
- Go forward using the browser key – notice no message either

**Expected behavior**

`on_update` should be called when clicking on links and using the browser's back and forward buttons.

**Environment:**
- Dioxus version: [0.4.0]
- Dx serve version: [0.4.1]
- Rust version: [1.73.0]
- OS info: [MacOS]
- App platform: [`web`]

**Code**

Use the [example code](https://dioxuslabs.com/learn/0.4/router/example/full-code) and add a log in the `RouterConfig::on_update`.

```rust
#![allow(non_snake_case)]

use dioxus::prelude::*;
use dioxus_router::prelude::*;

// ANCHOR: router
#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
#[layout(NavBar)]
#[route("/")]
Home {},
#[nest("/blog")]
#[layout(Blog)]
#[route("/")]
BlogList {},
#[route("/post/:name")]
BlogPost { name: String },
#[end_layout]
#[end_nest]
#[end_layout]
#[nest("/myblog")]
#[redirect("/", || Route::BlogList {})]
#[redirect("/:name", |name: String| Route::BlogPost { name })]
#[end_nest]
#[route("/:..route")]
PageNotFound {
route: Vec,
},
}
// ANCHOR_END: router

pub fn App(cx: Scope) -> Element {
render! {
Router:: {
config: move || RouterConfig::default()
.on_update(move |_| {
log::info!("--- route update ---");
None
})
}
}
}

#[inline_props]
fn NavBar(cx: Scope) -> Element {
render! {
nav {
ul {
li { Link { to: Route::Home {}, "Home" } }
li { Link { to: Route::BlogList {}, "Blog" } }
}
}
Outlet:: {}
}
}

#[inline_props]
fn Home(cx: Scope) -> Element {
render! {
h1 { "Welcome to the Dioxus Blog!" }
}
}

#[inline_props]
fn Blog(cx: Scope) -> Element {
render! {
h1 { "Blog" }
Outlet:: {}
}
}

#[inline_props]
fn BlogList(cx: Scope) -> Element {
render! {
h2 { "Choose a post" }
ul {
li {
Link {
to: Route::BlogPost { name: "Blog post 1".into() },
"Read the first blog post"
}
}
li {
Link {
to: Route::BlogPost { name: "Blog post 2".into() },
"Read the second blog post"
}
}
}
}
}

#[inline_props]
fn BlogPost(cx: Scope, name: String) -> Element {
render! {
h2 { "Blog Post: {name}"}
}
}

#[inline_props]
fn PageNotFound(cx: Scope, route: Vec) -> Element {
render! {
h1 { "Page not found" }
p { "We are terribly sorry, but the page you requested doesn't exist." }
pre {
color: "red",
"log:\nattemped to navigate to: {route:?}"
}
}
}

fn main() {
dioxus_logger::init(log::LevelFilter::Trace).expect("failed to init logger");
dioxus_web::launch(App);
}
```

```toml
[dependencies]
dioxus = "0.4.0"
dioxus-web = "0.4.0"
dioxus-router = "0.4.1"
dioxus-logger = "0.4.1"
log = "0.4.20"
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.