Crate dioxus_router

Expand description

§Dioxus Router

§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 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.

Re-exports§

pub use hooks::router;
pub use crate::components::GoBackButton;
pub use crate::components::GoForwardButton;
pub use crate::components::HistoryButtonProps;
pub use crate::components::Link;
pub use crate::components::LinkProps;
pub use crate::components::Outlet;
pub use crate::components::Router;
pub use crate::components::RouterProps;
pub use crate::hooks::*;
pub use crate::navigation::*;
pub use crate::routable::*;

Modules§

components: Components interacting with the router.
hooks: Hooks for interacting with the router in components.
navigation: Types pertaining to navigation.
routable: Routable

Structs§

GenericRouterContext: This context is set to the RouterConfig on_update method
Navigator: A view into the navigation state of a router.
OutletContext: A context that manages nested routing levels for outlet components.
ParseRouteError: An error that is thrown when the router fails to parse a route
RouterConfig: Global configuration options for the router.
RouterContext: A collection of router data that manages all routing functionality.

Functions§

navigator: Acquire the navigator without subscribing to updates.
root_router: Try to get the router that was created closest to the root of the virtual dom. This may be called outside of the router.
use_outlet_context: Returns the current outlet context from the component hierarchy.

Derive Macros§

Routable: Derives the Routable trait for an enum of routes