Gerald E ButlerandJonathan Kelley
f9d89b0ac1
* adhox: Fix Clippy lints in const-serialize etc. Fix the clippy lints that were preventing building: * const-serialize/src/lib.rs * core/src/nodes.rs * fullstack/src/serve_config.rs * adhoc: Change the way to satisfy the lint for 1.85 The lint for pointer comparison is only in 1.85. The solution uses a mechanism that was only stabilized with 1.85. Instead of using that solution, will just allow the lint on this function for now. Once the MSRV of Dioxus is updated to 1.85 or above, this can be changed to use the recommeneded solution. * adhoc: Fix the 'cargo make test' tests There were a number of tests failing to compile and/or run. Fixed those that could be meaningfully fixed. Those that were incomplete examples that could not be fixed are marked as 'ignore'. * adhoc: GitIgnore test results in playwright tests * fix wry rollback --------- Co-authored-by: Jonathan Kelley <jkelleyrtp@gmail.com>
Dioxus Router
Website | Guides | API Docs | Chat
Overview
Dioxus Router is a first-party Router for all your Dioxus Apps. It provides an interface similar to React Router, but takes advantage of types for more expressiveness.
use dioxus::prelude::*;
use dioxus_router::prelude::*;
use std::str::FromStr;
#[rustfmt::skip]
#[derive(Clone, Debug, PartialEq, Routable)]
enum Route {
#[nest("/blog")]
#[layout(Blog)]
#[route("/")]
BlogList {},
#[route("/:blog_id")]
BlogPost { blog_id: usize },
#[end_layout]
#[end_nest]
#[route("/")]
Index {},
}
#[component]
fn App() -> Element {
rsx! {
Router::<Route> { }
}
}
#[component]
fn Index() -> Element {
rsx! {
h1 { "Index" }
Link {
to: Route::BlogList {},
"Go to the blog"
}
}
}
#[component]
fn Blog() -> Element {
rsx! {
h1 { "Blog" }
Outlet::<Route> { }
}
}
#[component]
fn BlogList() -> Element {
rsx! {
h2 { "List of blog posts" }
Link {
to: Route::BlogPost { blog_id: 0 },
"Blog post 1"
}
Link {
to: Route::BlogPost { blog_id: 1 },
"Blog post 2"
}
}
}
#[component]
fn BlogPost(blog_id: usize) -> Element {
rsx! {
h2 { "Blog Post" }
}
}
You need to enable the right features for the platform you're targeting since these are not determined automatically!
Bundle Splitting
The Dioxus Router supports automatic bundle splitting along route variants. To enable this, you need to manually turn on the wasm-split feature explicitly on the dioxus-router crate:
[dependencies]
dioxus = { version = "*", features = ["router", "wasm-split"] }
dioxus-router = { version = "*", features = ["wasm-split"] }
Note that wasm-split must also be turned on in dioxus since the macro uses the re-exported wasm-split from the dioxus prelude.
Enabling splitting disconnects the call graph, meaning if you try to run your app with a normal dx serve, it won't work. When running with router splitting, you need to pass --experimental-wasm-split.
dx serve --experimental-wasm-split
In practice, we recommend passing dioxus-router?/wasm-split as a feature only when bundling:
dx bundle --features "dioxus-router?/wasm-split" --experimental-wasm-split
Note that the router will call .suspend() so you should add a SuspenseBoundary above the Outlet to prevent suspending the entire page.
Contributing
- Report issues on our issue tracker.
- Join the discord and ask questions!
License
This project is licensed under the MIT license.
Unless you explicitly state otherwise, any contribution intentionally submitted for inclusion in Dioxus by you shall be licensed as MIT without any additional terms or conditions.