[Bug]: Nested component does not get rendered when navigate or Link is called from its child component.

[Gechrist]

What version of React Router are you using?

6.8

Steps to Reproduce

This is my router:

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
  },
  {
    path: '/dashboard',
    element: <AuthenticationGuard component={Dashboard} />,
    errorElement: <ErrorPage />,
    children: [
      {
        path: 'careers',
        element: <Careers />,
        children: [
          {
            path: 'new',
            element: <CareerPage />,
          },
          {
            path: 'pilot',
            element: <CareerPage />,
          },
        ],
      },
      {
        path: 'logbooks',
        element: <Logbooks />,
        children: [
          {
            path: 'pilotlogbook',
            element: <LogbookPage />,
          },
        ],
      },
    ],
  },
  {
    path: '*',
    element: <404 />,
    errorElement: <ErrorPage />,
  },
]);

Expected Behavior

When I navigate to 'dashboard/careers/new', it should render the Careers component when navigate('/dashboard/careers') is called. Likewise, when I navigate to 'dashboard/logbooks/pilotlogbook', it should render the Logbooks component when navigate('/dashboard/logbooks') is called.

Actual Behavior

Whenever I navigate to 'dashboard/careers/new' or to 'dashboard/careers/pilot' calling navigate('/dashboard/careers') changes the URL but the actual component, Careers is not rendered. All I get is a blank page.

Similarly, clicking navigate('/dashboard/logbooks') at ('dashboard/logbooks/pilotlogbook') changes the URL but does not render the Logbooks component.

It works correctly if I am at 'dashboard/careers/new' and I call navigate('/dashboard/logbooks') and vice-versa.

[brophdawg11]

It's hard to say without a reproduction, but my hunch is that this is due to your <AuthenticationGuard component={Dashboard} />. You should be detecting authentication in loaders and redirecting accordingly there.

If it's not that - then if you can provide a minimal reproduction of the issue I'd be happy to look into it 👍

[Gechrist]

It wasn't the AuthenticationGuard but thanks to reproducing the issue like you suggested, I found the problem on my end.
Thanks for the help, it's much appreciated.

[ryok90]

Could you elaborate on your problem, please?
I have a similar problem and also for future reference.

[Gechrist]

It was my own fault, I had a check that was verifying the url which wasn't working correctly.

[ryok90]

Oh, thank you for answering!
I also managed to find a solution for my problem.
I was trying to set up a child path but didn't quite notice that I had to define the index inside the children's array.
It was only rendering the root element instead of the child one:

{
  path: '/profile',
  element: <Profile />,
  children: [
    { path: 'reviews', element: <Reviews /> },
  ],
},

When I actually should be doing:

{
  path: '/profile',
  children: [
    { index: true, element: <Profile /> },
    { path: 'reviews', element: <Reviews /> },
  ],
},