{"record":{"id":"89684103a664be81","repo":"DioxusLabs/dioxus","slug":"must-be-called-in-a-descendant-of-a-router-compone","errorCode":null,"errorMessage":"Must be called in a descendant of a Router component","messagePattern":"Must be called in a descendant of a Router component","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/router/src/hooks/use_navigator.rs","lineNumber":54,"sourceCode":"/// }\n///\n/// #[component]\n/// fn Dynamic(id: usize) -> Element {\n///     rsx! {\n///         p {\n///             \"Current ID: {id}\"\n///         }\n///     }\n/// }\n///\n/// # let mut vdom = VirtualDom::new(App);\n/// # vdom.rebuild_in_place();\n/// ```\n#[must_use]\npub fn use_navigator() -> Navigator {\n    use_hook(|| {\n        let router = try_consume_context::<RouterContext>()\n            .expect(\"Must be called in a descendant of a Router component\");\n\n        Navigator(router)\n    })\n}\n","sourceCodeStart":36,"sourceCodeEnd":59,"githubUrl":"https://github.com/DioxusLabs/dioxus/blob/393d190a801ccb441d41923e232289b4f8a5c669/packages/router/src/hooks/use_navigator.rs#L36-L59","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["Move components that call use_navigator() inside the Router's route tree","Make the app root a Router: #[derive(Routable)] enum + Router::<Route> {}","In tests, wrap the component in a Router, or refactor it to receive a Navigator as a prop"],"exampleFix":"// before\nfn App() -> Element {\n    let nav = use_navigator(); // App itself renders the Router -> no context yet\n    rsx! { Router::<Route> {} }\n}\n// after: only route components call use_navigator\n#[component] fn Home() -> Element { let nav = use_navigator(); ... }","handlingStrategy":"type-guard","validationCode":"// Optional variant that cannot panic:\nfn use_navigator_optional() -> Option<Navigator> {\n    use dioxus::prelude::*;\n    use_hook(|| {\n        try_consume_context::<dioxus::router::RouterContext>()\n            .map(dioxus::router::navigator::Navigator)\n    })\n}","typeGuard":"fn has_router_ancestor() -> bool {\n    dioxus::prelude::try_consume_context::<dioxus::router::RouterContext>().is_some()\n}","tryCatchPattern":null,"preventionTips":["Keep components calling use_navigator strictly inside the route tree","Pass a Navigator as a prop when a component must also render outside a Router","In tests, wrap components in Router::<Route> {} before rendering"],"tags":["router","hooks","navigator","context","panic"],"backgroundTag":null,"analyzedSha":"393d190a801ccb441d41923e232289b4f8a5c669","analyzedAt":"2026-08-16T11:27:45.815Z","schemaVersion":2},"datasetVersion":"2026-08-16T13:17:31.715Z"}