0

I would like to wrap the Link component from Tanstack Router with another component and be able to pass this component the props that are needed to be passed to the Link component.

I.e. I want to make a reusable that uses wraps an external button with the Tanstack Router Link

Something like this

import { Link, LinkOptions } from '@tanstack/router'

interface ButtonLinkProps {
  // how do I make this type safe, it results to `string | undefined` instead of valid routes I have defined
  to: LinkOptions['to']
  children: string
}

export function ButtonLink(props: ButtonLinkProps) {
  return (
    <Link to={props.to} params={{}} search={{}}>
      <Button component='span'>{props.children}</Button>
    </Link>
  )
}

When using the Link component directly the value passed to the to prop can only be one of the defined routes. However I'm not sure how define the to prop in my own defined component to achieve the same result.

// How do I achieve the same type safety I would get if I would use Link directly
<ButtonLink to='/'>Link</ButtonLink>
Sjiep
  • 688
  • 5
  • 14
  • What's the issue? Is there any error? – Lin Du Jul 12 '23 at 09:35
  • The issue is that in the ButtonLink `to` prop I can pass in any string, including non-available routes, whereas when I would use the Link directly typescript will give an error on invalid routes. – Sjiep Jul 12 '23 at 09:40

1 Answers1

0

Found the following solution that works for me on version 0.0.1-beta.104, assuming my ButtonLink component in the OP:

interface ButtonLinkProps {
  to: MakeLinkOptions['to']
  children: string
}

or if we simply want all props that can be provided to a Link

interface ButtonLinkProps extends MakeLinkOptions {
  children: string
}
Sjiep
  • 688
  • 5
  • 14