#1853·yew

Add ergonomic support for nested routers

Author: ranileCreated May 17, 2021Updated Apr 8, 2026

Labelsfeature-requestergonomicsproposalA-yew-router

Nested routers allow users to separate parts of application.

API

I would like to have the following API:

rust

#[derive(Routable)]
enum Route {
    #[at("/")]
    Home,
    #[at("/room/:id")]
    Room
}

// main component
html! { <Router<Routes> render=Router::render(main_switch) /> }

fn main_switch(route: &Route) -> Html {
    match route {
        Route::Home => html! { <Home /> },
        Route::Room => html! { <Room /> },
    }
}

// `Room` component
html! {
    <Router<RoomRoutes> render=Router::render(room_render) />
}

#[derive(Routable)]
#[mount_at("/room")]
enum RoomRoute {
    #[at("/")] // will be /room/
    List,
    #[at("/:id")] // will be /room/:id
    View { id: u64 },
}

fn room_render(route: &RoomRoute) -> Html {
    match route {
        RoomRoute::List => html! { <ListRooms /> },
        RoomRoute::View { id }  => html! { <DisplayRoom id=id /> },
    }
}

Implementation

In order to implement the aforementioned API, we would:

Add a function Routable trait for handling mount_at fn mount_at() -> Option<&'static str>;
Macro will implement this function, optionally returning a value
Router and functions for handling routes will use this value in order to ensure the child router works properly

Source: yewstack/yew

View original on GitHub View discussion on GitHub