How can I login outside the dashboard?

September 11, 2022

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;

>Solution :

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.