{"record":{"id":"59306dce60c814d9","repo":"DioxusLabs/dioxus","slug":"outlet-must-be-inside-of-a-router","errorCode":null,"errorMessage":"Outlet must be inside of a router","messagePattern":"Outlet must be inside of a router","errorType":"panic","errorClass":null,"httpStatus":null,"severity":"error","filePath":"packages/router/src/contexts/outlet.rs","lineNumber":45,"sourceCode":"\n    /// Creates a new outlet context for the next nesting level\n    pub fn next(&self) -> Self {\n        Self {\n            current_level: self.current_level + 1,\n            _marker: std::marker::PhantomData,\n        }\n    }\n\n    /// Returns the current nesting level of this outlet\n    pub fn level(&self) -> usize {\n        self.current_level\n    }\n\n    pub(crate) fn render() -> Element\n    where\n        R: Routable + Clone,\n    {\n        let router = use_router_internal().expect(\"Outlet must be inside of a router\");\n        let outlet: OutletContext<R> = use_outlet_context();\n        let current_level = outlet.level();\n        provide_context(outlet.next());\n\n        if let Some(error) = router.render_error() {\n            return if current_level == 0 {\n                error\n            } else {\n                VNode::empty()\n            };\n        }\n\n        router.current::<R>().render(current_level)\n    }\n}\n\n/// Returns the current outlet context from the component hierarchy.\n///","sourceCodeStart":27,"sourceCodeEnd":63,"githubUrl":"https://github.com/DioxusLabs/dioxus/blob/393d190a801ccb441d41923e232289b4f8a5c669/packages/router/src/contexts/outlet.rs#L27-L63","documentation":"Outlet renders the next nested route level by reading the router context via use_router_internal(). With no Router component among the ancestors the context is missing and the expect panics — Outlet only works inside a Router's route tree where a RouterContext has been provided.","triggerScenarios":"Rendering an Outlet in a plain component that is not part of a #[derive(Routable)] route tree: using Outlet for arbitrary composition without a Router, or mounting a route-layout component (which contains Outlet) outside Router.","commonSituations":"Extracting a route layout into a shared component and reusing it on a non-routed page; previewing or unit-testing route components in isolation; copying Outlet usage into a standalone library example.","solutions":["Render route components only inside Router::<Route> {} so every Outlet has the router context","Replace misused Outlet with regular nested components for non-routed composition","In previews/tests, wrap the component in a Router with a minimal Routable enum"],"exampleFix":"// before (App without router)\nrsx! { SomeLayout {} } // SomeLayout contains Outlet -> panics\n// after\nrsx! { Router::<Route> {} } // layouts render under the router's route tree","handlingStrategy":"validation","validationCode":"// Only render Outlet-bearing layouts as part of a route tree:\n#[derive(Clone, Routable)]\nenum Route {\n    #[layout(ShellLayout)] // ShellLayout contains Outlet\n    #[route(\"/\")]\n    Home {},\n}\n// root: rsx! { Router::<Route> {} }","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Use Outlet only in #[layout] / route components under a Router","For plain composition, nest ordinary components instead of Outlet","Wrap previews/tests of route components in a minimal Router"],"tags":["router","outlet","context","routing","panic"],"backgroundTag":null,"analyzedSha":"393d190a801ccb441d41923e232289b4f8a5c669","analyzedAt":"2026-08-16T11:27:45.815Z","schemaVersion":2},"datasetVersion":"2026-08-16T13:17:31.715Z"}