Comparison page: Comp. to other routing solutions?

[redbar0n]

When evaluating routing solutions it would be helpful with a comparison page, like React Query has.

Comparing react-location specifically to:

• Next.js router
• react-router (incl. Remix since remix is built on react-router v6)
• expo-next-react-navigation - for using Next.js with Expo Web (which uses React Native Web)
• router5 - routes as state, not in component tree, view library agnostic.
• xstate-router - model routing together with state in the same overarching statechart (could be very powerful?)
• navigation router - React and React Native (+Web) router which unentangles navigation components from hardcoded URL’s.

Besides the general characteristics I've listed, I'm curious on how they would compare to react-location, and pros/cons of each.

PS: Not really sure if this should be an Issue or a Discussion, but I presume you want to reserve Issues for bugs.

Update 2021-11-17: Added Navigation router to list.

[redbar0n]

Would be interesting to learn what routers this quote from react-location website refers to:

"Where most other routers draw the line with route matching to pathname only and basically give up on URL search param support in general, React Location goes the extra mile ..."

Since there are so many router options to choose from.

[tannerlinsley]

Pretty much every router written for React I've look into does not offer the level of integration and depth of API for search params that React Location does.

[tannerlinsley]

Obviously, I'll eventually be proven wrong there, but so far that's the case.

[redbar0n]

to rephrase my question: which ones have you looked into? :)

[grahammendick]

I bet you haven't looked into the Navigation router

[redbar0n]

Navigational components contain Hyperlinks and Hyperlinks aren't reusable because their href attributes tie them down to a particular UI. The Navigation router's data-first approach sets Hyperlinks free so you can reuse them across UIs.

🤩

[tannerlinsley]

I think this is a good idea. When the API stabilized a bit more, we can get started on this.

[redbar0n]

Nice. Do u want this as an Issue, or keep such ideas in Discussions?

[tannerlinsley]

Discussion for sure. I reserve issues for bugs and discussions for improvements/features/ideas.

[tannerlinsley]

There is now a comparison page! https://react-location.tanstack.com/comparison

[redbar0n]

Great!

For those of us not deep in the material as you, it would be nice with examples that illustrate the benefit of the various features. Like for example: «Search Param Stabilization (Structural Sharing)» - is it something that is merely an internal concern of the library, or something which will actually affect the DX or UX? And if so, how? That would make it easier to judge one’s desire for those features.

[tannerlinsley]

Good point. I'll need to find some good material on that one specifically, which is definitely a DX thing, not a UX thing. Essentially, it ensures that objects that have identical shapes, but not identical references from render to render don't trigger immutable change detection techniques that React and it's ecosystem rely on.

[tannerlinsley]

I just added the first link for structural sharing. I'll add more as I can!

[redbar0n]

aha, so it’s a persistent data structure.. I first got associations to the structural sharing in normalized caching.

Essentially, it ensures that objects that have identical shapes, but not identical references from render to render don't trigger immutable change detection techniques that React and it's ecosystem rely on.

I have a hard time understanding that sentence😅

[tannerlinsley]

A good starting point to the problem is to try and clone a JSON object before you put it into a useEffect dependency:

const copy = JSON.parse(JSON.stringify(original))

useEffect(() => {
  // copy will always be a new object *reference*, so this will always trigger, even if the original hasn't changed.
}, [copy])

From there, you must understand that the URL is just a string, so when you store structured data in it, you are effectively parsing and stringifying it all the time, which leads to the necessity for structural sharing.

[tannerlinsley]

The comparison page is now located at https://tanstack.com/router/v1/docs/comparison

[jthrilly]

Would you please consider adding wouter to the comparison? https://github.com/molefrog/wouter