How to add child route to index route?

[zasuh]

I have my index page at '/' which lists my users, when I click on a list item I want to display a different page '/$id' which is the details page. I have it currently implemented like this, but when I navigate to /$id the url is updated with the id but nothing else happens?

export const usersIndexRoute = createRoute({
  getParentRoute: () => indexRoute,
  path: '/',
  component: UsersPage,
});

const usersDetailsRoute = createRoute({
  getParentRoute: () => usersIndexRoute,
  path: '/$id',
  component: UsersDetailsPage,
});

export const usersRoutes = usersIndexRoute.addChildren([usersDetailsRoute]);

onRowClick={({ id }) => {
          navigate({
            to: '/$id',
            params: { id },
          });
        }}

[schiller-manuel]

an index route is a leaf in the route tree. you need this:

export const usersRoute = createRoute({
  getParentRoute: () => rootRoute,
  path: 'users',
});

export const usersIndexRoute = createRoute({
  getParentRoute: () => usersRoute,
  path: '/',
  component: UsersPage,
});

const usersDetailsRoute = createRoute({
  getParentRoute: () => usersRoute,
  path: '$id',
  component: UsersDetailsPage,
});

export const usersRoutes = usersRoute.addChildren([usersIndexRoute, usersDetailsRoute]);

please checkout the code based examples
e.g. https://tanstack.com/router/latest/docs/framework/react/examples/kitchen-sink

[zasuh]

Thank you for the reply! So how can I make /users to be my index page? As in if a user navigates to just / they are redirected to /users?

[schiller-manuel]

throw a redirect in beforeLoad of /

[zasuh]

This just creates an infinite reload of the page, I have to kill the entire tab to stop it from reloading.

export const indexRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: 'index',
  component: IndexPage,
  beforeLoad: ({ context, location }) => {
    throw redirect({
      to: '/users'
    });
  },
});