{"record":{"id":"641815b96bf207fc","repo":"leptos-rs/leptos","slug":"you-cannot-call-use-navigate-outside-a-router","errorCode":null,"errorMessage":"You cannot call `use_navigate` outside a <Router>.","messagePattern":"You cannot call `use_navigate` outside a <Router>\\.","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"router/src/hooks.rs","lineNumber":277,"sourceCode":"        }\n    })\n}\n\n/// Returns a function that can be used to navigate to a new route.\n///\n/// This should only be called on the client; it does nothing during\n/// server rendering.\n///\n/// ```rust\n/// # if false { // can't actually navigate, no <Router/>\n/// let navigate = leptos_router::hooks::use_navigate();\n/// navigate(\"/\", Default::default());\n/// # }\n/// ```\n#[track_caller]\npub fn use_navigate() -> impl Fn(&str, NavigateOptions) + Clone {\n    let cx = use_context::<RouterContext>()\n        .expect(\"You cannot call `use_navigate` outside a <Router>.\");\n    move |path: &str, options: NavigateOptions| cx.navigate(path, options)\n}\n\n/// Returns a reactive string that contains the route that was matched for\n/// this [`Route`](crate::components::Route).\n#[track_caller]\npub fn use_matched() -> Memo<String> {\n    use_context::<Matched>()\n        .expect(\"use_matched called outside a matched Route\")\n        .0\n        .into()\n}\n","sourceCodeStart":259,"sourceCodeEnd":290,"githubUrl":"https://github.com/leptos-rs/leptos/blob/32d20f6c9d517451d77beb68d88c7716823dac41/router/src/hooks.rs#L259-L290","documentation":"use_navigate requires routing context that only exists inside a <Router> component. Calling it outside — e.g. in a top-level module, plain function, or component rendered above the Router — panics because the navigation handle cannot be found in context.","triggerScenarios":"Calling `use_navigate()` in a component outside the `<Router>` tree (e.g. a login page or toast rendered above the router), in event handlers set up before the router mounts, or in tests without a router wrapper.","commonSituations":"Redirect-on-auth logic placed outside the router; navigation helpers called from global event listeners; storybook/test setups rendering components standalone.","solutions":["Move the component or function that calls `use_navigate()` inside the `<Router>` tree.","For programmatic navigation outside components, restructure to trigger navigation from within the router tree (e.g. a signal consumed by an in-router component), or use the `redirect` mechanism available in that context.","In tests, wrap with a MemoryRouter-based `<Router>`."],"exampleFix":"// before\nfn logout() {\n    let navigate = use_navigate(); // panics: called in a module fn outside tree\n    navigate(\"/login\", Default::default());\n}\n\n// after\n#[component]\nfn LogoutButton() -> impl IntoView {\n    let navigate = use_navigate();\n    view! { <button on:click=move |_| navigate(\"/login\", Default::default())>Logout</button> }\n}","handlingStrategy":"fallback","validationCode":"// Inside a component, verify context before navigating:\nlet navigate_fn = use_context::<RouterContext>().map(|cx| move |p: &str| cx.navigate(p, Default::default()));","typeGuard":"fn can_navigate() -> bool { use_context::<RouterContext>().is_some() }","tryCatchPattern":null,"preventionTips":["Trigger programmatic navigation only from components inside <Router>.","Don't stash navigate functions in globals or call them from outside the tree.","For auth redirects, place a redirecting component inside the router."],"tags":["react-hooks","router-context","navigation","leptos"],"backgroundTag":"hook-called-outside-router","analyzedSha":"32d20f6c9d517451d77beb68d88c7716823dac41","analyzedAt":"2026-09-01T18:55:42.580Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-09T01:17:15.007Z"}