DioxusLabs / DioxusLabs/dioxus
Dioxus Router’s `on_update` callback is not called when using browser’s back/forward buttons
- 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.