Type-Safe Links

[distinctdan]

I was surprised to discover there isn't any way to generate a Link url safely. React Router is already generating types for the route params. Is there any reason not to also generate a function that can build the URL with typesafe parameters? In this day and age of type safety, I don't see any reason to expose my app to possible programmer mistakes. If I make a typo in a URL, I expect the compiler to tell me about it. And since react router is already scraping all the route params, all of the information should already be available to generate such a function. It would also be opt-in, so this wouldn't be a breaking change.

Example use:

// URL looks like "/products/:category"
import type { Route as ProductRoute } from "./+types/product"

export default function ProductCategories() {
    return (<TabList>
        {/* Looks like "/products/cars" */ }
        <Tab href={ ProductRoute.buildPath({category: 'cars'}) }>Cars</Tab>
    <div>)
}

As a workaround, I'm considering building a big object of URL generators for all my routes, but that's kind of inconvenient, and it will have to be updated continually as we change routes.

[sergiodxa]

You can use the href utility https://reactrouter.com/api/utils/href

[distinctdan]

Whaaaat?! This is perfect! Why isn't this documented anywhere? At the very least this needs to be on the type safety page.

[distinctdan]

When I was searching online, all I could find were a bunch of plugins claiming to offer type safety, with some people suggesting to use TanStack router instead.

[distinctdan]

This should really be documented. How do you feel about me opening a bug report to fix the docs?

[sergiodxa]

You can send a PR to update the docs directly, it's here https://github.com/remix-run/react-router/blob/c1cddedf656271a3eec8368f2854c733b3fe27da/docs/api/utils/href.md

[distinctdan]

I could be open to doing a fix to the docs, but I might want to defer to the team for the content. You guys have put a good amount of effort into pulling types out of routes, so I would think you guys would be interested in what the docs should look like.

In my opinion, href should be the recommended way to do all links in react router because it's typesafe, or it should at least feature in a decent amount of the docs. As a starting point, the typesafety guide should be updated to talk about it and to link to the href function. If you guys really don't care what it looks like, I can do a PR updating href and the typing guide, but wanted to see if you guys wanted more input into what the docs look like.