Replace react-router with @tanstack/router

[allansson]

What

Refactor the app to use @tanstack/router instead of react-router.

Why

During the latest hackathon at Grafana, I wanted to be able to click a button in one part of the view and open up a specific request in the request list. I first solved this via global state management, but this brought a bunch of other issue such as needing to switch tabs to the request list tab.

So I figured that this would be a good fit for nested routes with react-router: I could just link to a specific request and that would open a nested route for the correct tab.

But then I found myself limited by the lack of type safety in react-router.

The useParams hook essentially returns a Record<string, string> so you have to check the existence of params before using them or, which is more common, throw type safety out the window and use a cast. And it compounds as you go down the route hierarchy: you need to do the parsing/casting in each route component. If you were to rename a param in some parent route, then you need to manually check all places that the param was being used.

The same goes for useSearchParams. react-router has no built-in support for type safe search params. You need to do all the parsing and type checking yourself.

Even the new data loader APIs are untyped. To access the data returned from a loader function, you need to use the useLoaderData hook which again is untyped.

There's a recent alternative to react-router called @tanstack/router (from the authors of react-query) that is designed to be completely type safe, including search params. From the looks of it, it supports pretty much everything that react-router does (incl. blocking navigation which we need).

On top of that, its loader APIs integrate nicely with react-query.

Additional context

Our usage of react-router is currently limited to top-level views: recordings, generators and scripts. If we are to migrate to @tanstack/router it's best to do it before its usage spreads.

Relying on a router could reduce some of the problems we have with the generator store, e.g. the selected request would be represented as a route param instead of global state.

[going-confetti]

Another example of the lack of type safety is our use of state from useLocation.
I think it's a good suggestion and it should be fairly easy to migrate now since our routes aren't complex (yet?)

[e-fisher]

I've also found myself in a situation where I used global state because of react-router limitations, tanstack router looks like a good alternative 👍

[cristianoventura]

I've reviewed the docs, and it looks like a solid alternative that will definitely benefit us. Given that our routes are relatively simple at this stage, replacing it now should be straightforward.