What's the benefit of upgrading to React Router v6

[bchohon]

This is a major upgrade and big disruption for many mature codebases. I see lots of seemingly needless renaming and updates that don't provide much value. Can someone please tell me the benefits to upgrading from v5 to v6?

CONS:

• Removed history (MAJOR)
• Removed Prompt (MAJOR)
• Removed optional parameters
• Makes me sad :(

PROS:

• Smaller bundle
• ???

[mfpopa]

I hope other devs who reviewed v6 can provide their thoughts on this.

After reviewing the pros and cons for a large web application I'm refactoring, there is no benefit in upgrading. Rather I cannot upgrade because:

• Cannot listen to route changes
• Cannot display prompts
• No support for absolute paths in descendant routes, [V6] [Feature]: Support absolute paths in descendant <Routes> #8035
• No support from Sentry, How to get paramaterized URLs from react router for Sentry performance monitoring #8327
• useNavigate renders unexpectedly on route change, useNavigate hook causes waste rendering #7634

[rawpixel-vincent]

after spending too much time on the upgrade, we decided to stay on react router v5 with a patched version of history... for the same reasons.
especially blocked with #8035 and #7634 and prompts

[martdavidson]

#7634 is mindblowing, and that the ticket is closed to further discussion is also pretty depressing, as that's where people go to get ideas for solving.

[igorsantos07]

quick note if you end up here out of nowhere: Sentry is already supporting v6

[WoodyWoodsta]

As others have correctly mentioned in certain issues, React Router 6 is a new router philosophy, not a major version increment. Many of the design choices either seem to be simplistic/lacking in maturity or are done with complete disregard for the current consumer-base.

The changes are dictated, meaning that despite this being open-source, there is no room for architectural discussion - this is characteristic of Facebook OS projects and I'm just not interested.

It's now on people like me to explain to a commercial business why the development teams needs to spend x weeks implementing and testing a new routing framework for our application which has hundreds of routes.

[bchohon]

@WoodyWoodsta which routing framework did you end up replacing react-router-dom with on your project? I'm currently looking for alternatives for a few other projects as well. I'm no longer interested in this codebase. As the saying goes, fool me once...

[WoodyWoodsta]

I'm actually not working on the project with this router anymore. Nothing changed before I left it!

[igorsantos07]

It honestly feels like every couple of years I get back to react-router I end up with a completely, completely different library which I have to re-learn and re-do everything from scratch. This time I wanted to get decent nesting since a new feature will use that a lot... decided to give the upgrade a try, and then realized, after a day of work, that some features we needed are now missing and aren't even mentioned in the migration docs. 🤦‍♂️

[slk333]

I agree totally with @WoodyWoodsta and I regret upgrading to v6. I feel like they should have be more clear about their intent.

[slk333]

Does the v6.4 version fix any shortcoming mentionned in this discussion, especially the flickering on redirect?

[ryanflorence]

This is great feedback.

Removed history (MAJOR)

Typically people want this to navigate outside of the react render tree and that was unsafe because of React's concurrent mode would get the UI out of state with your history object. We wanted to be forward compatible so we just hid history until the React team had an answer.

React 18 shipped useExternalSyncStore which fixed the problems. Now you can use router.navigate in v6.4 to safely navigate outside of the react tree.

More information here: #8264 (comment)

Removed Prompt (MAJOR)

We're bringing this back. It was always broken. Will still be broken, but not as much. More information here: #8139 (comment)

Removed optional parameters

We're bringing those back. More information here: #9550

Appreciate everybody's patience here! Covid threw our business for a loop. We always intended to figure these three things out but had to get back on our feet again. That time is now!

The changes are dictated, meaning that despite this being open-source, there is no room for architectural discussion

Totally. We regret this but like I said, rough times. We now have the resources and time to be more involved with the community to make sure upgrading is worth it and not difficult 🤗

[igorsantos07]

Please, add the information about the gone history and usage of router.navigate to the migration guide. I'm trying a bunch of guesses while looking for a way to fix this problem. The guide doesn't even explain that direct access to history is gone; it's, at best, implied. Also, if you look around on the web Stack Overflow, you'll find a couple of very, very dirty workarounds for this problem.

Even then, this answer doesn't exactly help pointing out how to access router.navigate and also leaves an empty space for some projects to be in - for instance, we've decided to migrate to RRv6 (for 1. nested routes which we will need now and 2. to keep up to date) since we were already at React v17, but after all is done we discover we actually need React v18 because of a hidden broken API which "will be back" if you do extra major migration work - ok, actually migrating from v17 to v18 is trivial, despite being a major release for the cornerstone of anyone's apps... But then again, there doesn't seem to be a single place in the docs that explains how to use that router.navigate, and it does incur in extra migration not explained in the main guide: moving away from component-based routes.......

This is frustrating, to say the least, specially if you consider the migration docs seems so well written.