Export a type that describes all available routes.

[ryanstaniforth]

I have a use case where I'm building a navigation with some static known URLs. I don't want to repeat the markup, so I loop over a simple array of URLs and labels, as such:

{([
  ['/', 'Home'],
  ['/users', 'Users'],
] satisfies Array<['/' | '/users', string]>).map(([to, label]) => (
  <router.Link
    key={to}
    to={to}
  >
    {label}
  </router.Link>
))}

For it to work with this library, I have to include satisfies Array<['/' | '/users', string]> so that the router.Link accepts the routes. This is great but I don't want to go around specifying '/' | '/users'. This is going to grow over time and needs maintaining alongside my defined route config.

So my idea is to have an exported type from the router or route config such as AvailableRoutes that I can use in place.

[rubanooo]

Using as const should also do the trick

{([
  ['/', 'Home'],
  ['/users', 'Users'],
] as const).map(([to, label]) => (
  <router.Link
    key={to}
    to={to}
  >
    {label}
  </router.Link>
))}

[ryanstaniforth]

Good point thanks. Still might be nice to have the exported type.

[ryanstaniforth]

Just realised also, when using const, if I specify a bad URL, the error is given at to={to} in the <router.Link> and is hard to understand as it simply states that the entire array contains an invalid URL, and doesn't specify which one.

If instead we had a type on the array, it would show exactly which array item doesn't conform to the type.

[ryanstaniforth]

Another use case I have for this is when I create a component that needs to accept a url. It would be really nice to have a way of passing around typed routes without having to pass around a <Link>.