You are currently viewing the docs for Dioxus 0.4.3 which is no longer maintained.

Adding the router to your application

In this chapter, we will learn how to add the router to our app. By itself, this

Make sure you added the dioxus-router dependency as explained in theintroduction.

In most cases, we want to add the router to the root component of our app. This

First, we define the router with the router macro:

src/first_route.rs
#![allow(non_snake_case)]
use dioxus::prelude::*;
use dioxus_router::prelude::*;

/// An enum of all of the possible routes in the app.
#[derive(Routable, Clone)]
enum Route {
    // The home page is at the / route
    #[route("/")]
    // If the name of the component and variant are the same you can omit the component and props name
    // If they are different you can specify them like this:
    // #[route("/", ComponentName, PropsName)]
    Home {},
}

Then we render the router with the Router]

src/first_route.rs
fn App(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}