Creating Our First Route

In this chapter, we will start utilizing Dioxus Router and add a homepage and a404 page to our project.

Fundamentals

The core of the Dioxus Router is the [Routable] macro and the [Router] component.

Routable is a trait for anything that can:

• Be parsed from a URL
• Be turned into a URL
• Be rendered as to a Element

Let's create a new router. First, we need an actual page to route to! Let's add a homepage component:

#[component]
fn Home(cx: Scope) -> Element {
    render! {
        h1 { "Welcome to the Dioxus Blog!" }
    }
}

Creating Routes

We want to use Dioxus Router to separate our application into different "pages".Dioxus Router will then determine which page to render based on the URL path.

To start using Dioxus Router, we need to use the [Routable] macro.

The [Routable] macro takes an enum with all of the possible routes in our application. Each variant of the enum represents a route and must be annotated with the [route(path)] attribute.

#![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 {},
}

All other hooks and components the router provides can only be used as a descendant of a [Router] component.

If you head to your application's browser tab, you should now see the textWelcome to Dioxus Blog! when on the root URL (http://localhost:8080/). Ifyou enter a different path for the URL, nothing should be displayed.

This is because we told Dioxus Router to render the Home component only whenthe URL path is /.

Fallback Route

In our example, when a route doesn't exist Dioxus Router doesn't render anything. Many sites also have a "404" page when a path does not exist. Let's add one to our site.

First, we create a new PageNotFound component.

#[component]
fn PageNotFound(cx: Scope, route: Vec<String>) -> 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:?}"
        }
    }
}

Next, register the route in the Route enum to match if all other routes fail.

#[derive(Routable, Clone)]
enum Route {
    #[route("/")]
    Home {},
    // PageNotFound is a catch all route that will match any route and placing the matched segments in the route field
    #[route("/:..route")]
    PageNotFound { route: Vec<String> },
}

Now when you go to a route that doesn't exist, you should see the page not foundtext.

Conclusion

In this chapter, we learned how to create a route and tell Dioxus Router whatcomponent to render when the URL path is /. We also created a 404 page tohandle when a route doesn't exist. Next, we'll create the blog portion of oursite. We will utilize nested routes and URL parameters.