conscious-sapphire

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> 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 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...

8 Replies

genetic-orange•5mo ago

we have type utilities here https://tanstack.com/router/latest/docs/framework/react/guide/type-utilities#type-checking-link-options-with-validatelinkoptions

Type Utilities | TanStack Router React Docs

Most types exposed by TanStack Router are internal, subject to breaking changes and not always easy to use. That is why TanStack Router has a subset of exposed types focused on ease of use with the in...

conscious-sapphireOP•5mo ago

Ooh I never found this. Thank you! I'll look into it and see if it solves my problem. There is actually one more thing I am a bit unsure of. I usually like to structure my projects in a feature-based hierarchy. So it would be like

routes
- users
- - index
- - $userId
- - components
- customers
- - index

routes
- users
- - index
- - $userId
- - components
- customers
- - index

etc. bad example but I hope you get it. basically I like to have acomponents folder in my page directory, because I don't want my page-component to be 700 lines long. Now I have my routes directory as per TanStack design. They import the actual page-component from a directory called pages. Is this the way to go? Because otherwise TanStack would generate page-routes from my components I guess 😅 The types are complex for me, but I managed to get it to work with (my real example is ...)

interface HeaderLinkProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TOptions = unknown,
> {
  title: string
  url: ValidateLinkOptions<TRouter, TOptions>["to"]
}

interface HeaderLinkProps<
  TRouter extends RegisteredRouter = RegisteredRouter,
  TOptions = unknown,
> {
  title: string
  url: ValidateLinkOptions<TRouter, TOptions>["to"]
}

So that's great! I am one step further 🙂

genetic-orange•5mo ago

you can colocate the components. either prefix them with "-" or define a custom ignore prefix or pattern

conscious-sapphireOP•5mo ago

Can I ignore a whole directory? 🤔 I'ma look more into the documentation, perhaps I can find it

conscious-sapphireOP•5mo ago

I assume this is what you were reffering to. If I understand it correctly, I can ignore the whole directory https://tanstack.com/router/latest/docs/api/file-based-routing

File-Based Routing API Reference | TanStack Router Docs

TanStack Router's file-based routing is quite flexible and can be configured to suit your project's needs. Configuration options The following options are available for configuring the file-based rout...

conscious-sapphireOP•5mo ago

What would be the best practise for dynamic queries? Here's a very simple example.

const [id, setId] = useState(1)
userQuery({
  queryKey: ["users", id],
  queryFn: () => api.getUsers(id),
})
// Assume we have some input that sets the value of 'id'

const [id, setId] = useState(1)
userQuery({
  queryKey: ["users", id],
  queryFn: () => api.getUsers(id),
})
// Assume we have some input that sets the value of 'id'

Would this be considered good? I am worried the dynamic id would mess with the caching in the cachekey.

genetic-orange•5mo ago

that's a query question now, better ask in #react-query-questions

conscious-sapphireOP•5mo ago

Thank you a lot for all of your help @Manuel Schiller Very much appreciated ❤️

Gaming

Programming

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

Did you find this page helpful?