Trying to render dashboard component inside the layout using <Outlet /> but when accessing the /admin/dashboard route, The layout is not rendering. How to fix this?
App.js:
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route exact path="/admin" element={<Layout />} />
<Route exact path="/admin/dashboard" element={<Dashboard />} />
</Routes>
</Router>
</div>
);
}
Layout.js:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet />
<Navigate from="admin" to="/admin/dashboard" />
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
Dashboard.js:
export default function Dashboard() {
return <h1>Dashboard</h1>;
}
Layout routes need to actually have a nested route to be able to have it render its element into the Outlet, not as sibling routes.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route path="dashboard" element={<Dashboard />} />
</Route>
</Routes>
</Router>
</div>
);
}
Additionally, if you don't want to render anything on "/admin" then remove the redirect from Layout, remove the path prop from the layout route, and update the path of the dashbard.
Example:
export default function Layout() {
return (
<Fragment>
<div className="sb-nav-fixed">
<Navbar />
<div id="layoutSidenav">
<div id="layoutSidenav_nav">
<Sidebar />
</div>
<div id="layoutSidenav_content">
<main>
<Outlet /> // <-- no redirect now
</main>
<Footer />
</div>
</div>
</div>
</Fragment>
);
}
...
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route element={<Layout />}>
<Route path="/admin/dashboard" element={<Dashboard />} />
</Route>
<Route path="*" element={<Navigate to="/admin/dashboard" replace />} />
</Routes>
</Router>
</div>
);
}
If the plan is to render other routes into the layout route then keep the paths as they are and move the redirect to an index route.
export default function App() {
return (
<div className="App">
<Router>
<Routes>
<Route path="/admin" element={<Layout />}>
<Route index element={<Navigate to="dashboard" replace />} />
<Route path="dashboard" element={<Dashboard />} />
... other admin routes ...
</Route>
</Routes>
</Router>
</div>
);
}