Function leptos_router::Routes
source · pub fn Routes(props: RoutesProps) -> impl IntoView
Expand description
Contains route definitions and manages the actual routing process.
You should locate the <Routes/>
component wherever on the page you want the routes to appear.
Note: Your application should only include one <Routes/>
or <AnimatedRoutes/>
component.
You should not conditionally render <Routes/>
using another component like <Show/>
or <Suspense/>
.
// ❌ don't do this!
view! {
<Show when=|| 1 == 2 fallback=|| view! { <p>"Loading"</p> }>
<Routes>
<Route path="/" view=|| "Home"/>
</Routes>
</Show>
}
Instead, you can use nested routing to render your <Routes/>
once, and conditionally render the router outlet:
// ✅ do this instead!
view! {
<Routes>
// parent route
<Route path="/" view=move || {
view! {
// only show the outlet if data have loaded
<Show when=|| 1 == 2 fallback=|| view! { <p>"Loading"</p> }>
<Outlet/>
</Show>
}
}>
// nested child route
<Route path="/" view=|| "Home"/>
</Route>
</Routes>
}
§Required Props
- children:
Children
§Optional Props
- base:
String
- Base path relative at which the routes are mounted.