Dioxus Labs
Nested Routes
When developing bigger applications we often want to nest routes within eachother. As an example, we might want to organize a settings menu using thispattern:
└ 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.
#[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!()
}