Building a Nest

In this chapter, we will begin to build the blog portion of our site which will

Our site visitors won't know all the available pages and blogs on our site so we

We want our navbar component to be rendered on several different pages on our site. Instead of duplicating the code, we can create a component that wraps all children routes. This is called a layout component. To tell the router where to render the child routes, we use the Outlet]

Let's create a new NavBar component:

src/nested_routes.rs

#[component]
fn NavBar(cx: Scope) -> Element {
    render! {
        nav {
            ul {
                li { "links" }
            }
        }
        // The Outlet component will render child routes (In this case just the Home component) inside the Outlet component
        Outlet::<Route> {}
    }
}

Next, let's add our NavBar component as a layout to our Route enum:

src/nested_routes.rs

#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
    // All routes under the NavBar layout will be rendered inside of the NavBar Outlet
    #[layout(NavBar)]
        #[route("/")]
        Home {},
    #[end_layout]
    #[route("/:..route")]
    PageNotFound { route: Vec<String> },
}

To add links to our NavBar, we could always use an HTML anchor element but that has two issues:

It causes a full-page reload
We can accidentally link to a page that doesn't exist

Instead, we want to use the Link component provided by Dioxus Router.

The Link is similar to a regular <a> tag. It takes a target and children.

Unlike a regular <a> tag, we can pass in our Route enum as the target. Because we annotated our routes with the route(path)]Link will know how to generate the correct URL. If we use the Route enum, the rust compiler will prevent us from linking to a page that doesn't exist.

Let's add our links:

src/links.rs

#[component]
fn NavBar(cx: Scope) -> Element {
    render! {
        nav {
            ul {
                li {
                    Link {
                        // The Link component will navigate to the route specified
                        // in the target prop which is checked to exist at compile time
                        to: Route::Home {},
                        "Home"
                    }
                }
            }
        }
        Outlet::<Route> {}
    }
}

Using this method, the Link component only works for links within ourhere.

Now you should see a list of links near the top of your page. Click on one and

URL Parameters and Nested Routes

Many websites such as GitHub put parameters in their URL. For example,https://github.com/DioxusLabs utilizes the text after the domain to

We want to store our blogs in a database and load them as needed. We also

We could utilize a search page that loads a blog when clicked but then our users

The path to our blog will look like /blog/myBlogPage, myBlogPage being the

First, let's create a layout component (similar to the navbar) that wraps the blog content. This allows us to add a heading that tells the user they are on the blog.

src/dynamic_route.rs

#[component]
fn Blog(cx: Scope) -> Element {
    render! {
        h1 { "Blog" }
        Outlet::<Route> {}
    }
}

Now we'll create another index component, that'll be displayed when no blog post

src/dynamic_route.rs

#[component]
fn BlogList(cx: Scope) -> Element {
    render! {
        h2 { "Choose a post" }
        ul {
            li {
                Link {
                    to: Route::BlogPost { name: "Blog post 1".into() },
                    "Read the first blog post"
                }
            }
            li {
                Link {
                    to: Route::BlogPost { name: "Blog post 2".into() },
                    "Read the second blog post"
                }
            }
        }
    }
}

We also need to create a component that displays an actual blog post. This component will accept the URL parameters as props:

src/dynamic_route.rs

// The name prop comes from the /:name route segment
#[component]
fn BlogPost(cx: Scope, name: String) -> Element {
    render! {
        h2 { "Blog Post: {name}"}
    }
}

Finally, let's tell our router about those components:

src/dynamic_route.rs

#[derive(Routable, Clone)]
#[rustfmt::skip]
enum Route {
    #[layout(NavBar)]
        #[route("/")]
        Home {},
        #[nest("/blog")]
            #[layout(Blog)]
            #[route("/")]
            BlogList {},
            #[route("/post/:name")]
            BlogPost { name: String },
            #[end_layout]
        #[end_nest]
    #[end_layout]
    #[route("/:..route")]
    PageNotFound {
        route: Vec<String>,
    },
}

That's it! If you head to /blog/1 you should see our sample post.

Conclusion

In this chapter, we utilized Dioxus Router's Link, and Route Parameter

Tutorial

Web

Desktop

Mobile

Fullstack

Typesafe Routing

Building a Nest

Site Navigation

URL Parameters and Nested Routes

Conclusion

On this page

Edit this page