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.

[ghry5]

I came up with a small stackblitz example.
It still has some limitations.

• Order of tabs
• Get rid of type cast
• How to properly manage the initial tab
• How to enforce staticData on a subset of child routes

[firatoezcan]

If anyone elses wants to do something like this, this is my current solution for a similar problem (using shadcn/Radix-UI). It could probably be improved a lot, but it works:

export const Route = createFileRoute("/_app/deliver-collect/$hubId")({
	component: RouteComponent,
	beforeLoad: async ({ location, params, context }) => {
		return preloadQuery<routeHubIdDeliverCollectQuery>(context.relayEnvironment, query, {
			hubId: params.hubId,
		});
	},
	loader: async (ctx) => {
		return ctx.context;
	},
});

function RouteComponent() {
	const { hub } = usePreloadedQuery<routeHubIdDeliverCollectQuery>(query, Route.useLoaderData());
	const location = useLocation();
	const router = useRouter();
	const params = Route.useParams();
	const match = Route.useMatch();

	const tabs = useMemo(() => {
		return [
			linkOptions({ to: "/deliver-collect/$hubId", label: "Deliver", params }),
			linkOptions({ to: "/deliver-collect/$hubId/collect", label: "Collect", params }),
		];
	}, [params]);

	// Router location updates before the page navigates away so we need to store the last active tab
	const lastActiveTab = useRef<string | null>(null);

	const activeTab = tabs
		.toSorted((a, b) => b.to.length - a.to.length)
		.find((tab) => {
			const tabLocation = router.buildLocation(tab);
			return location.pathname.startsWith(tabLocation.pathname);
		});

	if (activeTab) {
		lastActiveTab.current = activeTab.label;
	}
	const activeTabLabel = lastActiveTab.current;

	if (!activeTabLabel) {
		throw new Error("Should not happen");
	}

	const hubName = hub.meta?.name || hub.slug;

	return (
		<div>
			<PageTitle title={`Hub ${hubName.toUpperCase()}`} />
			<Tabs value={activeTabLabel}>
				<TabsList>
					{tabs.map(({ label, ...linkProps }) => (
						<TabsTrigger value={label} key={label} asChild>
							<Link {...linkProps} from={Route.fullPath} replace>
								{label}
							</Link>
						</TabsTrigger>
					))}
				</TabsList>
				<TabsContent value={activeTabLabel}>
					<Outlet />
				</TabsContent>
			</Tabs>
		</div>
	);
}

This is opt-in, so not 100% automatic but fine for me and the pages nested even further opt-out of the tabbed layout by prefixing with $hubId_ so it's a tabbed layout that when going deeper removes the tabbed layout again.

useChildMatches seems like a better solution. If someone finds a better way of doing this, greatly appreciated.