React Router createBrowserRouter nested paths not showing

Question

I have the code below

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage></HomePage>,
  },
  {
    path: "login",
    element: <LoginPage></LoginPage>,
    children: [
      { path: "store", element: <StoreLoginPage /> },
      { path: "master", element: <ClientLoginPage /> },
    ],
  },
  {
    path: "Dashboard",
    element: <DashboardPage />,
  },
]);

the path "/login/store" and "/login/master" both render <LoginPage/> which should only map to the path "/login". I can't figure out why this is not working. The docs say the nested paths should be in the children array.

Answer 1

While it is correct that nested routes are specified as children of a parent route, the routed elements are only rendered through an Outlet component rendered by the parent route's element. In this case the layout route LoginPage component should be rendering an Outlet for the nested routes to render their content into.

Example:

import { ..., Outlet } from 'react-router-dom';

const Login = () => {
  ...

  return (
    ...
    <Outlet /> // <-- nested route render content here
    ...
  );
};

const router = createBrowserRouter([
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "login",
    element: <LoginPage />,
    children: [
      { path: "store", element: <StoreLoginPage /> },
      { path: "master", element: <ClientLoginPage /> },
    ],
  },
  {
    path: "Dashboard",
    element: <DashboardPage />,
  },
]);

For more details see Layout Routes and Outlets.