DioxusLabs/dioxus · error

Must be called in a descendant of a Router component

Error message

Must be called in a descendant of a Router component

What it means

use_navigator() is a hook that resolves the RouterContext during the component's first render (inside use_hook). If the component is not a descendant of a Router, try_consume_context returns None and the hook panics on first render.

Source

Thrown at packages/router/src/hooks/use_navigator.rs:54

/// }
///
/// #[component]
/// fn Dynamic(id: usize) -> Element {
///     rsx! {
///         p {
///             "Current ID: {id}"
///         }
///     }
/// }
///
/// # let mut vdom = VirtualDom::new(App);
/// # vdom.rebuild_in_place();
/// ```
#[must_use]
pub fn use_navigator() -> Navigator {
    use_hook(|| {
        let router = try_consume_context::<RouterContext>()
            .expect("Must be called in a descendant of a Router component");

        Navigator(router)
    })
}

View on GitHub (pinned to 393d190a80)

Solutions

1. Move components that call use_navigator() inside the Router's route tree
2. Make the app root a Router: #[derive(Routable)] enum + Router::<Route> {}
3. In tests, wrap the component in a Router, or refactor it to receive a Navigator as a prop

Example fix

// before
fn App() -> Element {
    let nav = use_navigator(); // App itself renders the Router -> no context yet
    rsx! { Router::<Route> {} }
}
// after: only route components call use_navigator
#[component] fn Home() -> Element { let nav = use_navigator(); ... }

// Optional variant that cannot panic:
fn use_navigator_optional() -> Option<Navigator> {
    use dioxus::prelude::*;
    use_hook(|| {
        try_consume_context::<dioxus::router::RouterContext>()
            .map(dioxus::router::navigator::Navigator)
    })
}

fn has_router_ancestor() -> bool {
    dioxus::prelude::try_consume_context::<dioxus::router::RouterContext>().is_some()
}

When it happens

Trigger: Calling use_navigator() in a component rendered above or outside the Router component; in an app launched without routing; or in a child that mounts before the Router provides context.

Common situations: A nav-bar component that calls use_navigator placed above the Router in the tree; unit tests rendering the component bare without a Router wrapper; migrating components from a routed app into a library.

Related errors

• A router must be present to use navigator
• use_route must have access to a router
• Outlet must be inside of a router
• The hook list is already borrowed: This error is likely caus
• access to `window`

AI-assisted analysis of DioxusLabs/dioxus@393d190a80 (2026-08-16). Data as JSON: /api/errors/89684103a664be81. Report an issue: GitHub.