React router outlet not rendering the layout

Question

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>;
}

Answer 1

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>
  );
}