T
TanStack•13mo ago
rare-sapphire

Dynamic Nav?

Can someone point me to a simple example of creating a dynamic nav based on file-based routes? I am feeling pretty dumb that I can't find an example in the docs.
22 Replies
dependent-tan
dependent-tan•13mo ago
what do you mean by "dynamic nav"? please share an example
rare-sapphire
rare-sapphireOP•13mo ago
meaning I want to loop through the routes in my project and make a nav. It is 'dynamically' or programmatically generated from the file-based routes. It does not make sense to manually create the links when there are routes and paths already created. I have an about page, I have a home page, I have a contact page. These are all file-based routes. It seems to me that I could loop over those a make a nifty navigation so that I don''t have to manually add links to my nav. You would think there would be an example of that in the docs, but I cannot find it. In the kitchen sink example this is what they are mapping over—a manually made array. Why? I know I am a newb when it comes to tanstack router, but this does not seem like the right way to do it. ``` {( [ ['/', 'Home'], ['/dashboard', 'Dashboard'], ['/expensive', 'Expensive'], ['/layout-a', 'Layout A'], ['/layout-b', 'Layout B'], ['/profile', 'Profile'], ['/login', 'Login'], ['/route-group', 'Route Group'], ] as const ).map(([to, label]) => {
dependent-tan
dependent-tan•13mo ago
if there are many routes, not all should maybe put into the nav? totally depends on the use case
rare-sapphire
rare-sapphireOP•13mo ago
exactly! so why can't we provide some examples. Don't we want to help people understand how to use it? There are examples of this for react-router. Why do we make it so difficult?
dependent-tan
dependent-tan•13mo ago
hm? I meant: maybe you want to be selective about which routes you prominently link to
rare-sapphire
rare-sapphireOP•13mo ago
so are you saying the best way to make a nav is just to manually make all of the links? This seems silly to me. That defies logic as a programmer.
dependent-tan
dependent-tan•13mo ago
no not saying that just thinking: how would you select a subset of all routes if you had them in array? however, router has all you need just looking it up
rare-sapphire
rare-sapphireOP•13mo ago
there most certainly is an API to match routes at a certain level. There has to be a way to filter the routes.
dependent-tan
dependent-tan•13mo ago
router.routesByPath or router.routesById or router.flatRoutes
rare-sapphire
rare-sapphireOP•13mo ago
I feel like I am just going to have to switch back to using react-router. There is better docs and more examples online. It is frustrating bc I like the tanstack libraries. But its just such a high learning curve to use them. useRouter hook? I can't be the only person that wants to generate a nav based on the routes. Does anyboy know where I can go to get some help? Next.js docs?
dependent-tan
dependent-tan•13mo ago
did you maybe not see this? here is an example
dependent-tan
dependent-tan•13mo ago
rare-sapphire
rare-sapphireOP•13mo ago
Thank you. I appreciate the help. I did not see that example even though i was looking through that demo. I started logging the useRouter and was trying to see what was available. I don't understand why flatRoutes is the 'right' one to use here, but I will go with it for now. Also don't know the difference between 'to' and 'fullpath'. You don't have access to 'children' with flatRoutes so it seems it will be tougher to restrict nested paths if you wanted to. Sorry for being a noob. I guess I am alone in wanting to do something that seems like it should be so easy. So I guess I am weird or dumb. Maybe both. : )
No description
dependent-tan
dependent-tan•13mo ago
you could recurse over router.routeTree, it has all the hierarchy information you need
something that seems like it should be so easy
I guess it really depends on the use case. if you can describe your's in more detail, we'll find a solution. now that you mention "children" it seems you route tree isn't as simple as you said above
rare-sapphire
rare-sapphireOP•13mo ago
I am a frontend dev that does not have a ton of experience with routing. I am learning tanstack router for the first time. I was just experimenting above. I don't really have any specific criteria to give you. There are no exact specifications. I was building out a testing repo and I thought. Hmmm. It would be cool to generate a nav from my routes. It seems so sensible. I can see this being useful for a documentation site. Subnavs. All sorts of things. So I go to docs and there is no obvious example. What if you want to list all the children of a nested route? I am just here chatting and trying to learn and understand. I was thinking that perhaps flatRoutes meant it would not include nested routes, bu this is not the case. So it seems I will have to filter based on path or something like that. Overall, I am wondering if I used code-based routes, then this might be a lot easier? I resisted that temptation bc tanstack docs say file-based is the best way to use the router.
dependent-tan
dependent-tan•13mo ago
the route tree at runtime will be the same, does not matter whether it is coded-based vs. file-based
rare-sapphire
rare-sapphireOP•13mo ago
No description
dependent-tan
dependent-tan•13mo ago
I only suggested to use flatRoutes since you did not mention you had nested routes:
I have an about page, I have a home page, I have a contact page.
rare-sapphire
rare-sapphireOP•13mo ago
but thanks to our convo, I actually got somewhere today.
dependent-tan
dependent-tan•13mo ago
you are right that this topic is not covered in the documentation so it would be cool to add this to it you are very welcome to create a PR for the documentation, even if it is just to get this going doesn't have to be perfect
rare-sapphire
rare-sapphireOP•13mo ago
I'll be glad to once I have a better understanding. : ) Yeah, I am bailing on this. too much for me right now. I can't make out from the docs how to do this. Thanks again. For now, I am just manually making a list to build the nav. The downside is that you have to manage in two places, but maybe that's a good thing. I hope this helps other people who are facing similar issues. 
const links = [
  { name: 'Alert', path: '/alert' },
  { name: 'Badge', path: '/badges' },
  { name: 'Button', path: '/button' },
  { name: 'Toast', path: '/toast' }
];

const MainNav = () => {
  return (
    <ul>
      {links.map(({ name, path }) => (

        <li key={name}>
          <Link to={path}>{name}</Link>
        </li>
      ))}
    </ul>
  );
};
I made another option that is more like the examples I was asking for. No idea if this appropriate or not. At least this is better than hard-coding the nav. Sadly, this creates a 'soft navigation' warning in the console. I clearly don't get it. LOl!
const links = [
  { name: 'Alert', path: '/alert' },
  { name: 'Badge', path: '/badges' },
  { name: 'Button', path: '/button' },
  { name: 'Toast', path: '/toast' }
];

const MainNav = () => {
  return (
    <ul>
      {links.map(({ name, path }) => (

        <li key={name}>
          <Link to={path}>{name}</Link>
        </li>
      ))}
    </ul>
  );
};
I made another option that is more like the examples I was asking for. No idea if this appropriate or not. At least this is better than hard-coding the nav. Sadly, this creates a 'soft navigation' warning in the console. I clearly don't get it. LOl!
const MainNav = () => { const router = useRouter(); const { routesByPath } = router; const componentRoutes = Object.entries(routesByPath).filter( ([path]) => path.startsWith('/components/') && path !== '/components' ); const components = componentRoutes.map(([path]) => ( <Link key={path} to={path} className="w-full py-2 px-4 text-gray-800 hover:bg-gray-200 transition"> {toTitleCase(path.replace('/components/', ''))} </Link> )); return ( <nav> <section className="grid gap-2 py-4"> <h2 className="font-bold px-4">Components</h2> <div className="grid">{components}</div> </section> </nav> ); };
rare-sapphire
rare-sapphireOP•13mo ago
No description

Did you find this page helpful?