{"record":{"id":"db25f61e57edd225","repo":"leptos-rs/leptos","slug":"tried-to-use-a-outside-a-router","errorCode":null,"errorMessage":"tried to use <A/> outside a <Router/>.","messagePattern":"tried to use <A/> outside a <Router/>\\.","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"router/src/link.rs","lineNumber":132,"sourceCode":"    /// If `true`, the router will scroll to the top of the window at the end of navigation. Defaults to `true`.\n    #[prop(default = true)]\n    scroll: bool,\n    /// The nodes or elements to be shown inside the link.\n    children: Children,\n) -> impl IntoView + 'static\nwhere\n    H: ToHref + Send + Sync + 'static,\n{\n    fn inner(\n        href: ArcMemo<String>,\n        target: Option<Oco<'static, str>>,\n        exact: bool,\n        children: Children,\n        strict_trailing_slash: bool,\n        scroll: bool,\n    ) -> impl IntoView {\n        let RouterContext { current_url, .. } =\n            use_context().expect(\"tried to use <A/> outside a <Router/>.\");\n        let is_active = {\n            let href = href.clone();\n            move || {\n                let path = normalize_path(&href.read());\n                current_url.with(|loc| {\n                    let loc = loc.path();\n                    if exact {\n                        loc == path\n                    } else {\n                        is_active_for(&path, loc, strict_trailing_slash)\n                    }\n                })\n            }\n        };\n\n        view! {\n            <a\n                href=move || href.get()","sourceCodeStart":114,"sourceCodeEnd":150,"githubUrl":"https://github.com/leptos-rs/leptos/blob/32d20f6c9d517451d77beb68d88c7716823dac41/router/src/link.rs#L114-L150","documentation":"The `inner` render function of the `<A>` component reads `RouterContext` (for `current_url`) from context to compute whether the link is active. Without a `<Router>` ancestor the `expect` panics with \"tried to use <A/> outside a <Router/>\".","triggerScenarios":"Rendering `<A>` (or components wrapping it) outside `<Router>`; rendering `<A>` into a portal whose owner is outside the router; using `<A>` in tests without a router wrapper.","commonSituations":"Header/nav components hoisted above the router for layout reasons; dialog/modal portals mounted at document root; component libraries exporting link components used in non-router pages.","solutions":["Render `<A>` inside the `<Router>` tree.","Restructure layout so nav components are children of the router (or use root layout via router children).","Use a plain `<a>` for links that don't require router-aware active state."],"exampleFix":"// before\nview! {\n  <header><A href=\"/\">Home</A></header>\n  <Router><Routes/></Router>\n}\n\n// after\nview! {\n  <Router>\n    <header><A href=\"/\">Home</A></header>\n    <Routes/>\n  </Router>\n}","handlingStrategy":"fallback","validationCode":"let router_ok = use_context::<RouterContext>().is_some();\nif !router_ok { /* render plain <a> instead of <A> */ }","typeGuard":"fn inside_router() -> bool { use_context::<RouterContext>().is_some() }","tryCatchPattern":null,"preventionTips":["Keep all <A> components within the <Router> subtree.","Design layouts so headers/navs are router children.","Add a test that renders the full app tree including router to catch misplaced links."],"tags":["router-context","component","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"}