Nested routes in / don't get rendered

[RodPaDev]

Hi I need help migrating to v6, basically our top level component App.jsx uses withAuthenticator hoc which provides auth context to all of the components, so any component nested in App is authenticated

So I started porting code but noticed that exact is no longer an acceptable prop and the docs tell us to use a trailing * to denote absolute paths, so I did this

 const route = useRoutes([
    {
      element: <App />,
      path: '/*',
      children: [
        {
          element: <Copy />,
          path: 'copy',
          children: []
        }
      ]
    }
  ])

Still nothing! the <Copy> element at path copy doesn't get rendered, so I tried prepending a / before copy like so

  const route = useRoutes([
    {
      element: <App />,
      path: '/*',
      children: [
        {
          element: <Copy />,
          path: '/copy',
          children: []
        }
      ]
    }
  ])

and I get this error

 Absolute route path "/copy" nested under path "/*" is not valid. An absolute child route path must start with the combined path of all its parent routes.

Which doesn't make much sense because it technically has the combined paths of all its parent routes since parent is /

[BenJenkinson]

Would this do what you want?

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

const Example = () => {
  const element = useRoutes([
    {
      element: <App />,
      children: [
        {
          index: true,
          element: <Home />,
        },
        {
          path: '/copy',
          element: <Copy />,
        },
      ],
    },
  ]);

  return element;
};

const App = () => (
  <div>
    <p>As a "layout" route, "children" routes are rendered in the <code>&lt;Outlet&gt;</code></p>
    <Outlet />
  </div>
);

const Home = () => <div>This is the "home" route.</div>;

const Copy = () => <div>This is the "copy" route.</div>;

Changes from your question example

• I removed the path: '/*', from the parent route so that it would act as a 📚 "layout route"
• I added an example <App> component which uses the 📚 <Outlet> component

[RodPaDev]

Yep, that's what I was looking for!