Visit the parent route URL should redirect on an indexed child route with a path

[abarnto]

Hi everyone.

I was wondering if there's neat way to have an index child route with also a path, so that when one visits the parent URL not only the index child is rendered but also the URL changes accordingly.
I mean, suppose we have:

 const router = createBrowserRouter([
  {
    path: '/settings',
    element: <SettingsLayout />,
    children: [
      {
        index: true,
        element: <AudioSettings />,
      },
      {
        path: 'video',
        element: <VideoSettings />,
      },
      {
        path: 'notifications',
        element: <NotificationsSettings />,
      },
      {
        path: 'profile',
        element: <ProfileSettings />,
      },
    ],
  },
 ]) 

In the example, I've intentionally omitted a "general purpose" settings section. This because, sometimes, there could be cases in which we don't have a child that perfectly matches the meaning of the parent path; so it would be appropriate to show the user a full explanatory URL, after they hit the parent URL.
As for the example above, by now, hitting /settings would show /settings while displaying AudioSetting. Instead it would be great if they, after hitting the /settings URL, will see /settings/audio.
By now, the only way I found to accomplish this is:

 const router = createBrowserRouter([
  {
    path: '/settings',
    element: <SettingsLayout />,
    children: [
      {
        index: true,
        loader: () => redirect('/settings/audio'),
      },
      {
        path: 'audio',
        element: <AudioSettings />,
      },
     ...
    ],
  },
 ])

However it seems a bit hacky to me. The ideal would be set both path and index on the child rendering AudioSettings, so it can be rendered both by hitting /settings and /settings/audio. Do you think it can be possible to implement?

Thanks to the maintainers of the library, by the way.

[brophdawg11]

Yep! You can do this with optional segments - here's an example: https://codesandbox.io/s/index-with-path-fv3jfr?file=/src/index.js

[abarnto]

Thank you for the quick reply. However, optional segments don't do the job neither, since what I'd really expect is that when I visit the parent URL, the URL itself updates with the one defined in the index child. I've just updated both title and description for clarity.

[brophdawg11]

In that case the redirect approach is exactly what you're looking for, no? There's some ambiguity in the question:

can be rendered both by hitting /settings and /settings/audio

If this is what you want - then optional segments are the solution. You have a single route that renders a component with or without the given URL segment.

but also the URL changes accordingly

If this is what you want - then your redirect example is correct since you are working with 2 routes that do two different things. One redirects and one renders content.

[abarnto]

Ok... what I was looking for was an automatic redirection when parent URL was hit and there was a path along with index on one of its children routes. But I guess that splitting render/redirect competences is a better approach, so I'll stick with it. Thanks for help.

[aress31]

@abarnto solution would be ideal to avoid unecessary boilerplate code (i.e., loader).

[bestii]

Easiest approach would be to add a <Navigate to={'/settings/audio'} /> element as the child pointing to the parent("/")

const router = createBrowserRouter([
  {
    path: '/settings',
    element: <SettingsLayout />,
    children: [
      {
        path: '/', // Define an explicit path for the index route
        element: <Navigate to={'/settings/audio'} />, 
      },
      {
        path: 'audio', 
        element: <AudioSettings />,
      },
      {
        path: 'video',
        element: <VideoSettings />,
      },
      {
        path: 'notifications',
        element: <NotificationsSettings />,
      },
      {
        path: 'profile',
        element: <ProfileSettings />,
      },
    ],
  },
]);

[brophdawg11]

This is a less ideal approach than using an index route and a redirect as shown above. A path of / introduces confusion/ambiguity around whether it's intended to match /settings or /settings/ or both, and using Navigate breaks the "decoupling of navigating/fetching and rendering" concept that is at the heart of the new 6.4 data APIs.

This would be the preferred approach:

      {
        index: true,
        loader: () => redirect("/settings/audio"),
      },