search
menu
Dioxus 0.4.3IntroductionRouterReferenceDefining RoutesNested Routes
You are currently viewing the docs for Dioxus 0.4.3 which is no longer maintained.

Nested Routes

When developing bigger applications we often want to nest routes within each other. As an example, we might want to organize a settings menu using this pattern:

└ Settings
  ├ General Settings (displayed when opening the settings)
  ├ Change Password
  └ Privacy Settings

We might want to map this structure to these paths and components:

/settings		  -> Settings { GeneralSettings }
/settings/password -> Settings { PWSettings }
/settings/privacy  -> Settings { PrivacySettings }

Nested routes allow us to do this without repeating /settings in every route.

Nesting

To nest routes, we use the #[nest("path")] and #[end_nest] attributes.

The path in nest must not:

  1. Contain a Catch All Segment
  2. Contain a Query Segment

If you define a dynamic segment in a nest, it will be available to all child routes and layouts.

To finish a nest, we use the #[end_nest] attribute or the end of the enum.

src/nest.rs
#[derive(Routable, Clone)]
// Skipping formatting allows you to indent nests
#[rustfmt::skip]
enum Route {
    // Start the /blog nest
    #[nest("/blog")]
        // You can nest as many times as you want
        #[nest("/:id")]
            #[route("/post")]
            PostId {
                // You must include parent dynamic segments in child variants
                id: usize,
            },
        // End nests manually with #[end_nest]
        #[end_nest]
        #[route("/:id")]
        // The absolute route of BlogPost is /blog/:name
        BlogPost {
            id: usize,
        },
    // Or nests are ended automatically at the end of the enum
}

#[component]
fn BlogPost(cx: Scope, id: usize) -> Element {
    todo!()
}

#[component]
fn PostId(cx: Scope, id: usize) -> Element {
    todo!()
}
PREVIOUSDefining Routes
NEXTLayouts