leptos-rs/leptos · error

<Outlet/> used without RouteContext being provided.

Error message

<Outlet/> used without RouteContext being provided.

What it means

`<Outlet/>` reads the `ChildRoute` context that the router provides to each matched route so the outlet can render the next nested child. When no `RouteContext` is in scope (outlet used outside a route's view, or a route with no children rendered where none exist), the `expect` panics with this message.

Source

Thrown at router/src/nested_router.rs:1102

        provide_context(child.clone());
        let outer_owner = outer_owner.clone();
        (move || {
            trigger.track();
            let mut view_fn = view_fn.lock().or_poisoned();
            view_fn(outer_owner.child())
        })
        .into_any()
    })
}

/// Displays the child route nested in a parent route, allowing you to control exactly where
/// that child route is displayed. Renders nothing if there is no nested child.
#[component]
pub fn Outlet() -> impl RenderHtml
where
{
    let ChildRoute(child) = use_context()
        .expect("<Outlet/> used without RouteContext being provided.");
    let child = child.lock().or_poisoned().clone();
    let outer_owner = Owner::current().unwrap();
    child.map(|child| {
        move || {
            child.trigger.track();
            let mut view_fn = child.view_fn.lock().or_poisoned();
            view_fn(outer_owner.child())
        }
    })
}

View on GitHub (pinned to 32d20f6c9d)

Solutions

1. Render `<Outlet/>` only inside a route view, and ensure child routes are declared as `<ParentRoute>` (or nested `<Route>` children) so the outlet context exists.
2. Check the route hierarchy: the component containing `<Outlet/>` must be the `view` of a parent route that has child routes.
3. If children may be absent, wrap the outlet in a component that is only mounted within a parent route, or conditionally render based on matched children.

Example fix

// before
view! {
  <LoggedInContent/> // contains <Outlet/>, but rendered outside routes -> panic
  <Routes/>
}

// after
view! {
  <Routes>
    <ParentRoute path=path!("/app") view=LoggedInContent>
      <Route path=path!("/dashboard") view=Dashboard/>
    </ParentRoute>
  </Routes>
}
// LoggedInContent renders <Outlet/> inside its view.

let has_outlet_ctx = use_context::<crate::nested_router::ChildRoute<impl AnyView>>().is_some();
if !has_outlet_ctx { return ().into_any(); }

fn outlet_available() -> bool { /* inside a route view */ use_context::<Matched>().is_some() }

When it happens

Trigger: Rendering `<Outlet/>` outside any route view (e.g. directly in a page above `<Routes>`); using `<Outlet/>` in a leaf route with no nested children configured; a component like `LoggedInContent` rendered outside the `<ParentRoute>`/`<Route>` tree.

Common situations: Layout components meant to nest children but placed outside the parent route definition; forgetting to wrap child routes in `<ParentRoute>` so the outlet context is provided; tests rendering `<Outlet>` standalone.

Related errors

• Tried to access Location outside a <Router>.
• called use_resolved_path outside a <Router>
• You cannot call `use_navigate` outside a <Router>.
• use_matched called outside a matched Route
• tried to use <A/> outside a <Router/>.

AI-assisted analysis of leptos-rs/leptos@32d20f6c9d (2026-09-01). Data as JSON: /api/errors/983341757d40e87d. Report an issue: GitHub.