T
TanStack•2y ago
correct-apricot

Using `to` as a input type

Im trying to create a helper function for rendering some react components that get wrapped in a <Link/>. However, I'm finding that I get a typescript error saying I need to always provide params. I've got a route that uses path params. Is that why this is happening? My code looks like this: 
const TabOption = ({ label, path }: { label: string; path: LinkOptions['to'] }) => {
  return (
    <Link to={path} activeOptions={{ exact: true }} params>
      {({ isActive }) => (
        // my component
      )}
    </Link>
  );
};
const TabOption = ({ label, path }: { label: string; path: LinkOptions['to'] }) => {
  return (
    <Link to={path} activeOptions={{ exact: true }} params>
      {({ isActive }) => (
        // my component
      )}
    </Link>
  );
};
2 Replies
graceful-blue
graceful-blue•2y ago
I'd also love to know how to do this! I've read every github issue I could find about this and they're all very convoluted answers, many of which are old and when I attempt to replicate them the router package doesn't even export the same types anymore But I did find this: LinkOptions<RegisteredRouter["routeTree"], "/", TTo>["to"] which is what I set my path to (you also need to add <TTo extends string = "."> to between your function name and the parens around props so TTo is defined). That felt the most promising, as hovering over my path param shows a real type now. But unfortunately in the parent page that uses this component, the path prop shows as any and there's no typesafety :/ Clearly I'm still missing something Actually see this response here: https://discord.com/channels/719702312431386674/1223340177859018823/1223927592030306314 Sounds like they're working on this but it's not a clean answer yet
plain-purple
plain-purple•2y ago
Did you try createLink?

Did you find this page helpful?