Explore alternatives to React Router

[maxpatiiuk]

While React Router is the most popular solution out there for routing in react applications, it hasn't been great for us. React Router seems to be geared towards smaller applications.

Some of the issues we had:

• React Router is not very type safe (does not type-check if propper query string arguments or route arguments for a given route are provided, and does not automatically type check the outlet context)
• React Router changes a lot between versions - we had to migrate our syntax a lot twice already. And the docs are not always ready by the time the previous syntax is deprecated
• With React Router, it proved to be surprisingly difficult to specify some small metadata in the routes definitions for a given route (I wanted to specify a title, so that when that route is accessed, page title is changed automatically). To implement this, I had to hack react router types a bit, and access their private properties - bad
• In a path like /specify/view/<tableName>/<id>/, if table name or id changes, the component is not recreated from scratch - while this is better for performance, it introduces bugs (not just for this url - applies to any url with dynamic parameters) because React component code may not be handling dynamic changes to these parameters correctly (it has to properly reset old state and initialize new state). I wish react router provided a more explicit way to specify whether a URL is atomic or not OR made it easier to not forget to test if the route can handle dynamic changes properly.
• For passing down data to children, React Router requires using OutletContexts. This is verbose, can be not type safe (unless we don't forget to manually type it properly), and can be bad for performance. As a partial workaround, we have a SafeOutlet wrapper for React Router's Outlet.
• We have a concept of "overlays". The page may have main content, and may have a dialog open on top of it. The dialog may have it's own independent URL, and it's own set of possible routes (overlay routes). Making react router support out concept of overlay routes was non-trivial and bug prone (i.e around handling 404 states in both routers)
• In Query Builder, you can open Record Merging. Record merging has it's own URL. When Record merging merges a record OR user dismisses one of the records from merging, the URL is updated. There is no clean way to notify the Query Builder that a given record has been merged or dismissed from merging. We ended up using DOM events for this - an ugly solution.

Given that we already found workarounds for many of these issues, migrating to a different router is not urgent (#4286 is FAR more urgent), but still useful to keep in mind.

Explore what alternative options there are. For example, https://tanstack.com/router/v1/docs/quick-start

cc @CarolineDenis @melton-jason