Function leptos_router::Routes

pub fn Routes(props: RoutesProps) -> impl IntoView

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.