leptos-rs/leptos · error

Tried to access Location outside a <Router>.

Error message

Tried to access Location outside a <Router>.

What it means

`use_location()` reads the `Location` reactive struct from router context. It panics with this message when there is no `<Router>` ancestor providing a `RouterContext`, meaning the hook was called outside the router's reactive tree.

Source

Thrown at router/src/hooks.rs:173

#[track_caller]
pub(crate) fn use_router() -> RouterContext {
    if let Some(router) = use_context::<RouterContext>() {
        router
    } else {
        leptos::leptos_dom::debug_warn!(
            "You must call use_router() within a <Router/> component {:?}",
            std::panic::Location::caller()
        );
        panic!("You must call use_router() within a <Router/> component");
    }
}
*/

/// Returns the current [`Location`], which contains reactive variables
#[track_caller]
pub fn use_location() -> Location {
    let RouterContext { location, .. } =
        use_context().expect("Tried to access Location outside a <Router>.");
    location
}

pub(crate) type RawParamsMap = ArcMemo<ParamsMap>;

#[track_caller]
fn use_params_raw() -> RawParamsMap {
    use_context().expect(
        "Tried to access params outside the context of a matched <Route>.",
    )
}

/// Returns a raw key-value map of route params.
#[track_caller]
pub fn use_params_map() -> Memo<ParamsMap> {
    use_params_raw().into()
}

View on GitHub (pinned to 32d20f6c9d)

Solutions

1. Move the component calling `use_location()` inside the `<Router>` tree.
2. If the component must stay outside, wrap the app so `<Router>` is the outermost component and pass location-derived values down as props/signals.
3. In tests, render the component within a `<Router>` (or a MemoryRouter) provider.

Example fix

// before
view! {
  <NavBar/>        // uses use_location() -> panics
  <Router>
    <Routes>...</Routes>
  </Router>
}

// after
view! {
  <Router>
    <NavBar/>
    <Routes>...</Routes>
  </Router>
}

// Check context availability before using the hook inside a component:
let has_router = use_context::<RouterContext>().is_some();

fn has_router_context() -> bool { use_context::<RouterContext>().is_some() }

When it happens

Trigger: Calling `use_location()` in a component rendered above/outside `<Router>` (e.g. in App root before the router mounts), inside a portal/teleport mounted outside the router owner, or in tests/components without a router wrapper.

Common situations: Building a Navbar component that lives outside `<Router>`; rendering components in a test harness without `<Router>`; wrapping the router inside another component but calling hooks from the wrapper.

Related errors

• 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/>.
• <Outlet/> used without RouteContext being provided.

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