I get a landing website, with some routes, like login :

function AnonymousRoutes({ isLogged }: { isLogged: boolean }) {
  return isLogged ? <Navigate to="/admin" replace /> : <Outlet />;
}

function PrivateRoutes({ isLogged }: { isLogged: boolean }) {
  return isLogged ? <Outlet /> : <Navigate to="/login" replace />;
}

const routes = (isLogged: boolean) => [
  {
    element: <AnonymousRoutes isLogged={isLogged} />,
    children: [
      { path: "/login", element: <Login /> },
      { path: "/", element: <Landing /> },
      { path: "/install", element: <Install /> },
      { path: "/forgot", element: <ForgotPassword /> },
    ],
  },
  {
    element: <PrivateRoutes isLogged />,
        children: [
          {
            path: "admin",
            element: <Dashboard />,
            children: [
              { index: true, element: <AdminIndex /> },
            ],
         },
       ]
     },
];

All routes works as expected.

I get a protected side of website, with sidebar and protected routes.
I declare them like:

const adminroutes = [
  {
    type: "collapse",
    name: "Home",
    key: "admin",
    icon: <Icon fontSize="small">dashboard</Icon>,
    route: "/",
  },

I can reach protected components, but when clicking on link, route redirect to /* and not to /admin/*

These routes are declared into separated files.

So get 2 question:

• Can I merge the 2 files to handle routing with only one file ?
• How to redrect, when I’m on protectinng side, to child component, like /admin/* ?

Thanks