how to carry extra info for each single route?

[McDaddy]

Do we have a solution to enable the route to carry extra information.

e.g.

In same case, one page require show menu in the layout component, other one dont need show menu
I want to maintain these inform in one single place,

in the before, I'd like write router config like this

{
        path: 'aaaa',
        element: <aaaa />,
        label: 'xxxx',
        menuItem: true,  // extra info
        children: [
          {
            path: 'basicForm',
            element: <xxxx />,
            noMenu: true,  // extra info
          },
        ],
      },

the transfer this info into react-router config and extract the extra info

I don't know how to do the same thing in tanstack router

btw. can tanstack router export a router data structure, which could be used to render something like breadcrumb?

[pawelblaszczyk5]

You can use Route meta option to carry extra data in basically any format you like. Example from my app, where I add Breadcrumbs to meta:

export const appIndexRoute = new Route({
	getParentRoute: () => appRoute,
	meta: {
		Breadcrumb: () => {
			const LL = useLL();

			return <Breadcrumb>{LL.app.dashboard.name()}</Breadcrumb>;
		},
		getTitle: LL => LL.app.dashboard.name(),
	},
	path: "/",
}).update({
	component: lazyRouteComponent(async () => import("#/routes/_app._index/_page"), "AppIndexPage"),
});

and then access them and create an array of components to render

	const matches = useRouterState({ select: state => state.matches });
	const router = useRouter();

	const breadcrumbs = useMemo(
		() =>
			matches.flatMap(match => {
				const maybeBreadcrumb = router.routesById[match.routeId].options.meta?.Breadcrumb;

				if (!maybeBreadcrumb) return [];

				return {
					Breadcrumb: maybeBreadcrumb,
					key: match.id,
				};
			}),
		[matches, router],
	);

[MrAdam]

This doesn't work anymore, and it looks like meta has been removed from Route.
Got any tips on how to do this now?

[ArturBaybulatov]

Looks like it has been replaced by staticData:

https://tanstack.com/router/latest/docs/framework/react/guide/static-route-data