T
TanStack•2y ago
sensitive-blue

Recommended way to go about custom Links?

I would like to have more than just a string in my Link components and also handle the active state with own styles. My current approach would be something like 
<Link to="/dashboard">
  <NavbarItem
    label={t("navBar.dashboardLabel")}
    icon={<IconLayoutDashboard {...iconProps} />}
  />
</Link>
<Link to="/dashboard">
  <NavbarItem
    label={t("navBar.dashboardLabel")}
    icon={<IconLayoutDashboard {...iconProps} />}
  />
</Link>
This way I can add nav links by keeping the type safety but also can reuse a nav link component with its layout and styles. My only problem now is how to tell the NavbarItem that it's active? I know of activeProps but that is only for the Link itself... Would I have to create my own isActive check? How would I do that reliably with the router api? Another approach was to have the to prop on the NavbarItem itself and do the rest inside but extracting the correct types from the router types feels hacky and unstable. (I still wish there were some utility types to work with the router api types more flexibly. TRPC does it too with TRPCOutput and TRPCInput helpers) I think some examples how to build navigations with custom elements and also keeping it type safe would be nice as that's usually a common use case (at least for our projects).
2 Replies
sensitive-blue
sensitive-blueOP•2y ago
Found a way, not sure if I just didnt see it in the docs but with the source code I realized it also allows function children :D My solution now is: 
<Link to={link.to}>
  {({ isActive }) => (
    <NavbarItem
      label={link.label}
      icon={link.icon}
      isExtended={isExtended}
      isActive={isActive}
    />
  )}
</Link>
<Link to={link.to}>
  {({ isActive }) => (
    <NavbarItem
      label={link.label}
      icon={link.icon}
      isExtended={isExtended}
      isActive={isActive}
    />
  )}
</Link>
sensitive-blue
sensitive-blueOP•2y ago
(I was just blind, just found the part in the docs https://tanstack.com/router/latest/docs/framework/react/guide/navigation#passing-isactive-to-children)
Navigation | TanStack Router Docs
Everything is Relative Believe it or not, every navigation within an app is relative, even if you aren't using explicit relative path syntax (../../somewhere). Any time a link is clicked or an imperative navigation call is made, you will always have an origin path and a destination path which means you are navigating from one route to another ...

Did you find this page helpful?