Adding the router to your application

In this chapter, we will learn how to add the router to our app. By itself, thisis not very useful. However, it is a prerequisite for all the functionalitydescribed in the other chapters.

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. Thisway, we can ensure that we have access to all its functionality everywhere.

First, we define the router with the router macro:

#![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] component.

fn App(cx: Scope) -> Element {
    render! {
        Router::<Route> {}
    }
}