Make it easy to generate navigation from routeTree.children

[Dan503]

routeTree is an auto generated variable that holds all of your site navigation paths in it.

So it would make sense to be able to use that variable to loop over those paths to generate website navigation menus.

There are multiple problems making this a more painful task than it needs to be.

1. routeTree.children types are incorrect (Incorrect type on routeTree.children router#4766)
2. routeTree.children doesn't have a nested style structure of children having children, all of the paths are at the top level attached to the route, so this makes managing multi-level navigation more difficult.
3. It currently doesn't appear to be possible to define a navigation label using the createFileRoute function. This means that we have to manually create an object matching up paths to the nav label.
4. There doesn't appear to be an easy way to manage the order that the children nav items appear in.

This was my attempt at building a nav using routeTree.children.

import { Link } from '@tanstack/react-router'
import { routeTree, type RootRouteChildren } from '../routeTree.gen'

type RouteKey = keyof RootRouteChildren
type RoutePath = RootRouteChildren[RouteKey]['fullPath']

const routeLabels: Record<RoutePath, string> = {
  '/': 'Home',
  '/demo/form/address': 'Address Form',
  '/demo/form/simple': 'Simple Form',
  '/demo/start/api-request': 'Start - API Request',
  '/demo/start/server-funcs': 'Start - Server Functions',
  '/demo/store': 'Store',
  '/demo/table': 'TanStack Table',
  '/demo/tanstack-query': 'TanStack Query',
  '/jokes': 'Jokes',
}

export default function Header() {
  let navLinkKeys = Object.keys(routeLabels) as RoutePath[]
  return (
    <header className="p-2 flex gap-2 bg-white text-black justify-between">
      <nav className="flex flex-row flex-wrap">
        {navLinkKeys.map((routePath, index) => {
          // @ts-ignore
          const route = routeTree.children.find(
            (route: RootRouteChildren[RouteKey]) =>
              route.fullPath === routePath,
          )
          if (!route) return null
          return (
            <div key={route.id} className="px-2 font-bold">
              <Link to={route.path}>{routeLabels[routePath]}</Link>
            </div>
          )
        })}
      </nav>
    </header>
  )
}

I think the least disruptive fix would be to create a useRouteNavigation() hook for getting the navigation in a nested format and properties need to be added to the createFileRoute function to define navLabel and navOrder.

[jherr]

This is super cool! Though it would probably make for a better issue on TanStack router and with the intention to make an example that demonstrates how cool this is!