Jak osadzić zagnieżdżone route'y?

Jak mogę dodac zagnieżdzone Routes coś mi nie idzie :/ nie mam pomysłu. Jak klikne na zagnieżdzony element zwraca mi

Uncaught Error: A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

import { Navigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import Layout from '../component/layout/Layout';

type Props = {
  children: React.ReactNode;
  path: string;
};

const CustomRoute = ({ children, path }: Props) => {
  const { authenticated } = useAuth();

  if (path === '/login') {
    return authenticated ? <Navigate to="/" /> : children;
  }

  return authenticated ? <Layout>{children}</Layout> : <Navigate to="/login" />;
};

export default CustomRoute;

import { ComponentType } from 'react';
import CreateCarPage from '../page/car/create/page';
import HomePage from '../page/home/page';
import LoginPage from '../page/login/page';
import ListCarPage from '../page/car/list/page';

export type RouteModel = {
  Path: string;
  Page: ComponentType<any>;
  Text: string;
  SubItems?: RouteModel[];
};

const routes: RouteModel[] = [
  {
    Path: '*',
    Page: HomePage,
    Text: 'Home',
  },
  {
    Path: '/login',
    Page: LoginPage,
    Text: 'Login',
  },
  {
    Path: '/car',
    Page: ListCarPage,
    Text: 'Car',
    SubItems: [
      {
        Path: '/car/create',
        Text: 'Create',
        Page: CreateCarPage,
      },
    ],
  },
];

export default routes;

import { Route, Routes } from 'react-router-dom';
import routes, { RouteModel } from './router/routes';
import CustomRoute from './router/CustomRoute';

const renderRoutes = (routes: RouteModel[]) => {
  return routes.map((route, index) => {
    if (route.SubItems && route.SubItems.length > 0) {
      return (
        <Route
          key={index}
          path={route.Path}
          element={
            <CustomRoute path={route.Path}>
              <route.Page />
              {renderRoutes(route.SubItems)}
            </CustomRoute>
          }
        />
      );
    } else {
      return (
        <Route
          key={index}
          path={route.Path}
          element={
            <CustomRoute path={route.Path}>
              <route.Page />
            </CustomRoute>
          }
        />
      );
    }
  });
};

const App = () => {
  return <Routes>{renderRoutes(routes)}</Routes>;
};

export default App;

Z jakiej wersji react-router-dom korzystasz?

W dokumentacji jest przykład jak zrobić proste logowanie https://github.com/remix-run/react-router/tree/main/examples

Kubuś Puchatek napisał(a):

     return (
       <Route
         key={index}
         path={route.Path}
         element={
           <CustomRoute path={route.Path}>
             <route.Page />
             {renderRoutes(route.SubItems)}
           </CustomRoute>
         }
       />
     );

O ten kawałek kodu chyba chodzi. Tutaj chyba się wykrzacza, że robisz CustomRoute, do którego wrzucasz elementy Route, a pisze ci, że tam nie można.

he po szukaniu na necie i kilku godzinach okazało się że takie cusik <Outlet /> nie miałem :D