Cannot have multiple routes with the same component

[bastiengrignon]

Hello,

I've been trying to implement multiple routes with the same component using react router v6 but I cannot make it works !

export const newRouter = createBrowserRouter([
  {
    element: <Layout/>,
    children: [
      {
        path: routes.cgu,
        element: <LegalDocument fetchDocument={getCgu}/>,
      },
      {
        path: routes.privacy,
        element: <LegalDocument fetchDocument={getPrivacy}/>,
      },
      {
        path: routes.faq,
        element: <LegalDocument fetchDocument={getFaq}/>,
      },
    ]
  },
]);

My <Layout /> component looks like this :

<div className={classes.appRoot}>
  <div className={classes.appContainer}>
    <Outlet />
  </div>
  <LandingFooter/>
</div>

When navigating to any of this page (cgu, privacy or faq), the first time everything works fine but then from one of this page, I have Link components redirecting to the other pages but this doesn't do anything, I'm not even running into my useEffect().

I'd like to know if there is a way to do it with react router v6 ?

[phoneticallySAARTHaK]

You should give a minimal reproducible example

[bastiengrignon]

Sorry for the issue it's not even a react-router issue, I juste forgot to put my variable in the useEffect so it can be triggerred on each call 🙄