[Bug]: rendered descendant <Routes> (or called useRoutes()) at "/". Path: '*' for NotFound page.

[romanh24]

What version of React Router are you using?

6.16.0 and 6.2.2

Steps to Reproduce

I got an error in the console:

history.ts:501 You rendered descendant <Routes> (or called `useRoutes()`) at "/" (under <Route path="/">) but the parent route path has no trailing "*". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render.
Please change the parent <Route path="/"> to <Route path="*">.

My App.tsx:

return (
     <BrowserRouter>
        <RouterComponent isAuth={isAuth} />
    </BrowserRouter>
)

RouterComponent.tsx:

  return useRoutes(
    routes.map((route) => ({
      path: route.path,
      element: isAuth || !route.protected ? route.element : <Navigate to="/sign-in" replace />,
    })),
  );

routes:

 return [
   {
     path: '/',
     element: (
       <CustomerLayout>
         {isUser ? <Navigate to="/schedules" /> : <Navigate to="/dashboard" />}
       </CustomerLayout>
     ),
     protected: true,
   },
   {
     path: '/sign-in',
     element: <AuthLayout> <SignIn /> </AuthLayout>,
     protected: false,
   },
    {
     path: '/dashboard/*',
     element: <CustomerLayout><Dashboard /></CustomerLayout>,
     protected: true,
   },
     {
     path: '*',
     element: <CustomerLayout><NotFound /></CustomerLayout>,
     protected: false,
   },
];

Expected Behavior

Case 1:
When change from '/' to '*'

 {
      path: '*',
      element: (
        <CustomerLayout>
          {isUser ? <Navigate to="/schedules" /> : <Navigate to="/dashboard" />}
        </CustomerLayout>
      ),
      protected: true,
    },

the <NotFound /> which has path: '*', doesn't work.

Ok, then I change from '/' to '/*' . Anyway, the <NotFound /> which has path: '*', doesn't work.

Case 2:
I tried to set not to use the useRoutes(). Nest inside one another using <Outlet />inside the <CustomerLayout>:

 return (
   <Routes>
      <Route path="/" element={<CustomerLayout/>}>
         <Route path="schedules" element={<Schedules />} />
         <Route path="dashboard" element={<Dashboard />} />
      </Route>
   </Routes>
  );

I had the same error:
history.ts:501 You rendered descendant <Routes> (or calleduseRoutes()) at "/" (under <Route path="/">) but the parent ...
Then ok, I changed to '/' to '/*'. But it doesn't render any of the <Schedules /> or <Dashboard /> components.

Actual Behavior

Case 1 is expected to work where the path works: '*' with the .

[Pradeep-Kurapati]

How did you solve it?

I've been dealing with the same issue. Nothing seems to work "/", "", "/"