I created a layout component that receives the routes, but I am not able to leave the login separate from the dashboard
Routes
function AppRouter() {
return (
<Routes>
<Route path="/" element={<Navigate to="/dashboard" />} />
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/bookings" element={<Bookings />} />
<Route path="/sell-car" element={<SellCar />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<NotFound />} />
</Routes>
);
}
export default AppRouter;
Layout
const Layout = () => {
return (
<div className="layout">
<Sidebar />
<div className="main__layout">
<TopNav />
<div className="content">
<AppRouter />
</div>
</div>
</div>
);
};
export default Layout;
CodePudding user response:
If you are wanting to render the Login
component and route on its own outside the layout then the code needs a bit of a refactor.
Convert Layout
into a layout route component that renders an Outlet
for nested routes.
import { Outlet } from 'react-router-dom';
const Layout = () => {
return (
<div className="layout">
<Sidebar />
<div className="main__layout">
<TopNav />
<div className="content">
<Outlet />
</div>
</div>
</div>
);
};
Render a layout route and un-nest the "/login"
route.
function AppRouter() {
return (
<Routes>
<Route path="/" element={<Navigate to="/dashboard" replace />} />
<Route path="/login" element={<Login />} />
... other routes without layout ...
<Route element={<Layout />}>
<Route path="/dashboard" element={<Dashboard />} />
<Route path="/bookings" element={<Bookings />} />
<Route path="/sell-car" element={<SellCar />} />
<Route path="/settings" element={<Settings />} />
<Route path="*" element={<NotFound />} />
... other routes with layout ...
</Route>
</Routes>
);
}
Depending on how much of the sidebar or topnav/header, etc you want to render with each route you might need to further split the Layout
component's UI into further layouts that can be conditionally applied via layout routes.
For more details see Layout Routes.