How to get all the children of a route, to set up a navigation?

[itshallrun]

How do I set up the following navigation properly.

For example:

/tables

• /tableA
• /tableB

The navigation should have two links to tableA and tableB as tabs.

This is my solution so far.
Looks pretty cumbersome. Help me improve it.

For now I have to define each NavigationItem manually.
How could I improve that?
Can I somehow read the children from tables route and then autogenerate them?

import tableA_route from "../../routes/tables/$tableId/_table/tableA.tsx";
import tableB_route from "../../routes/tables/$tableId/_table/tableB.tsx";

const subNavigationItems = [
  {
    disabled: false,
    id: tableA_route.id,
    to: tableA_route.to,
    label: tableA_route.path,
  },
  {
    disabled: false,
    id: tableB_route.id,
    to: tableB_route.to,
    label: tableB_route.path,
  },
];

I am using MUI. To match a tab I have to use the current location as the value.
Getting it from useChildMatches is the way I could figure. But getting it from the array seems to be wrong.
Why is it an array, and can it happen that the current path won't be on index 0?

export function Subnavigation({ items }: { items: Array<SubnavigationItem> }) {
  const childMatch = useChildMatches();
  const currentLocation = useLocation();

  return (
    <Box>
      <Tabs value={childMatch[0].routeId || false}>
        {items.map((item) => {
          return (
            <Tab
              disabled={item.disabled}
              key={item.id}
              label={item.label}
              value={item.id}
              component={Link}
              to={item.to}
              from={currentLocation.pathname}
            />
          );
        })}
      </Tabs>
    </Box>
  );
}

[schiller-manuel]

Can you please provide a minimal complete example by forking one of the examples on stackblitz?

[itshallrun]

here is a fork
I have adjusted it, to get it closer to my actual structure

I have two main questions now.

1. How can I track the active state of a Tab if it is not a Link Component from Tanstack?
2. How would I type an Array of objects, that is an abstraction of my tab routes, so I get code completion as for the Link Component props to/from

Both questions are covered in the catalog route:

Here is the relevant code

//how to type this correctly, to get code completion, and allow for labels?
const tabRoutes = [
  {
    to: './tableA',
    label: 'Table A',
  },
  {
    to: './tableB',
    label: 'Table B',
    //}];
  },
] as const satisfies ReadonlyArray<LinkProps>; //no code completion, does not allow label

//how to track the active state of tabs? Can I somehow match agains the relative path ./tableA? Or am I on the wrong path here?
const currentMatchedRoute = './tableA';

/**
 * I assumed that I can get the relative path from some of the match or location hooks.
 * I managed to get only the fullPath with the id.
 * Do I realy have to operate the relative path out of the id path?
 */

export const Route = createFileRoute('/quotes/$quoteId/catalog')({
  component: () => (
    <div>
      Catalog: <hr />
      <Tabs value={currentMatchedRoute}>
        {tabRoutes.map((route) => (
          <Tab
            key={route.to}
            label={route.label}
            value={route.to}
            component={Link}
            to={route.to}
            from="/quotes/$quoteId/catalog"
          />
        ))}
      </Tabs>
    </div>
  ),
});

In my initial question, I wanted to use to/from from Route Object References, instead of string literals.
But If I got that right, that is not recommended.

[JanMisker]

@itshallrun Did you ever find a good solution?

[5ebastianMeier]

I hope this gives you a good starting point:

Your first question seems to be how to dynamically iterate over the currently active routes' children.
You could do this by finding the route in the flatRoutes property of your router instance. If you find the correct route in there you will notice the children property contains all declared routes that reference the current route as a parent.

If you want to match the active route you could do this by accessing router.state.matches - the last match is the most precise while the others are parent routes that have been matched along the way (useful to mark a certain area that "contains" multiple routes as active). You can either match them by their path, params and searchParams or provide additional info during route declaration using the staticData attribute.

Your last question is the most difficult to accomplish and I have not tried this myself yet: How to get type inference based on the route declaration in your own components?
I will try this once I've got other refactorings in place, but in short what I would do is start by copying the original Link component as a clone in my own codebase and start from there. Once you've established a minimum working example, this should be easy to use for other use cases. This seems to be a good starting point:

router/packages/react-router/src/link.tsx

Line 977 in 3808c6e

export type LinkComponent<TComp> = <

[JanMisker]

I've also been looking around a bit in the meantime and for my purpose the useChildMatches() works fine.