react-router

That's... not quite right :) React Router, which belongs to Remix, which was acquired by Shopify, is here: https://github.com/remix-run/react-router Tanstack Router is an entirely new router.

You know you can just read rfc's right? there is a reason they update the thing, because people use it. https://github.com/remix-run/react-router/discussions/catego...

Tanner never worked on react-router: https://github.com/remix-run/react-router/commits/main/?auth...

We still can't upgrade past v5 because our apps do "unconventional" things like ... have a stable list of full-pathed routes that are type checked, while v6's child routes don't support full-paths. https://github.com/remix-run/react-router/discussions/10288

> How are you implementing SPAs in a way that you can't return a 404? Not specifically me, but a lot of SPAs have their own routing. So you would go to https://my-spa.com/user/39820002/post/39811155 When you hit that route, the webserver returns /index.html with the JS bundle, the JS runs and matches the user ID and post ID from the URL and then maybe makes some API requests to fetch content of whatever, I mean the SPA doesn't have to be backed by an API anyways, could be purely static but still use a router. In the React world, react-router is (was) pretty popular: https://github.com/remix-run/react-router That's a library that works exactly that way, relying on every route being passed to the JS bundle for handling, so the webserver needs to be configured to never return 404 and just return the index.html for every route, here is an

Yep, here is the React Router team getting it wrong(among other things): https://github.com/remix-run/react-router/issues/7634

They're most of the way to doing it correctly! What's missing is a few edge cases, such as ensuring the click is happening without modifier keys. This is how react-router handles it: https://github.com/remix-run/react-router/blob/main/packages...

It's the defacto router because it has gone through many iterations, has lots of users, is easy to bring into a React app, and doesn't fight w/ React, it works with it. Plus there are a variety of approaches to declaring routes. [0] I'm not sure I see how obvious it is that a <Redirect/> is wrong. But that's fine, I take your point that it's not particularly intuitive. I'm of the opinion that routing, in general, is a function of application state - and I like to manage my application state with Redux - so I will often also mix in connected-react-router [1]. This lets you do navigation w/ an imperative API [2]. [0] https://github.com/ReactTraining/react-router/tree/master/pa... [1] https://github.com/supasate/connected-react-router [2] https://github.com/supasate/connected-react-router/blob/mast...

Maybe people should realize that the problem is with the JS libraries ecosystem and how most are build in a way that "just jumping into a lib/framework to read its code and see what it does" can't seam to be feasible anymore. For example, in a React app if I'd want to jump from a `Route` import from react-router to it's readable code definition [1], NO IDE or editor around is capable a properly doing the jump, I either get to a Typescript definition (VSCode does this - imo the worst possible behavior) or to some unreadable transpiler outputed code. This creates a huge divide between framework/library/component-author and "lowly" client/user-programmers. Compare this to the Python ecosystem where basically any editor or IDE can help me jump to the right place in a library's nice and readable code, and even in the worst case where the autho

> there's no relative routes https://github.com/ReactTraining/react-router/issues/2172 I've been managing "relative" routes by just using `match.path` and `match.url` from the previous route. Works fine. function Parent(props) { return ( <> <Link to='/child'>Child</Link> <Route path='/child' component={Child}/> </> ); } function Child({match}) { return ( <> <Link to={`${match.url}/grandchild`}>Grandchild</Link> <Route path={`${match.path}/grandchild`} component={Grandchild} /> </> ) }

> there's no relative routes > React router's <Link> do not allow you to link outside of the current site Both valid points. Not show stoppers though. And not enough to make me regret using the library. The solution to the external links issue is a one-liner. > there's no way to refresh the page https://github.com/ReactTraining/react-router/issues/1982 ("that's your responsibility, not ours") That is your responsibility. Why do you need the routing library to handle page refreshing for you? > the scroll position will stick when you navigate to a new route Making the page scroll to the top when navigating to a new page is trivial. I would 100% rather have this problem instead of the opposite: scroll jumping to the top when I don't want it to. That's so much harder to fix. > Navigating to the same page would not actually reload the page, it

Using react router on one of my personal projects (~ 30k loc) was probably one of my largest regrets. At every turn it seemed designed to do the thing I wouldn’t expect, or have arbitrary restrictions that made my life tougher. Some examples: * there's no relative routes https://github.com/ReactTraining/react-router/issues/2172 * there's no way to refresh the page https://github.com/ReactTraining/react-router/issues/1982 ("that's your responsibility, not ours") * The scroll position will stick when you navigate to a new route, causing you to need to create a custom component wrapper to manage scrolling https://github.com/ReactTraining/react-router/issues/3950 * React router's <Link> do not allow you to link outside of the current site https://github.com/ReactTraining/react-router/issues/1147 so you have to make an <a> in those cases. This

This is a great talk by Ryan Florence (one of the creators of React Router) where he basically reimplements the basics of the library from scratch: https://www.youtube.com/watch?v=wPJxmZx62gI I'd also just look at the React Router codebase. The components are pretty well written and somewhat easy to understand: https://github.com/ReactTraining/react-router/blob/master/pa...