How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Hi! I’ve read the Custom Link guide and successfully created a custom link using TanStack Router.

I also have a

<Header>

<Header>

component that takes a list of links like this:

interface Props {
  link: {
    url: string;
    title: string;
  }[];
}

interface Props {
  link: {
    url: string;
    title: string;
  }[];
}

Each

url

url

is a string, but I want them to be type-safe — ideally validated or inferred from the route definitions in my RouteTree.gen.
Is there a type I can import? Or do I have to do some forward-ref stuff here as well?

I find it difficult to abstract things with TanStack Router. It feels kind of rigid to me. But I'm also really new to Tanstack, so perhaps I just haven't learnt it yet.

Thanks in advance!

Custom Link | TanStack Router React Docs

While repeating yourself can be acceptable in many situations, you might find that you do it too often. At times, you may want to create cross-cutting components with additional behavior or styles. Yo...

TanStack•11mo ago•

9 replies

slow-yellow

How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Hi! I’ve read the Custom Link guide and successfully created a custom link using TanStack Router.

I also have a

<Header>

<Header>

component that takes a list of links like this:

interface Props {
  link: {
    url: string;
    title: string;
  }[];
}

interface Props {
  link: {
    url: string;
    title: string;
  }[];
}

Each

url

url

Custom Link | TanStack Router React Docs

How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Similar Threads

How can I make a list of urls type-safe with TanStack Router in a custom Header component?

Similar Threads

Similar Threads

Similar Threads