feat: React Router v6 support

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

React Router v6 received a stable release on November 3, 2021.

This version is half the size of the previous one and has much better support for hooks.

Describe the Use Case

According to the blog post:

"We want to be very clear about this: React Router v6 is the successor to all previous versions of React Router including v3 and v4/5. It is also the successor to Reach Router. We encourage all React Router and Reach Router users to upgrade to v6 if possible. We have some big plans for v6, and we don’t want you to be left out when we introduce some really cool stuff in 6.x! (Yes, even you v3 users clinging to your onEnter hooks are not going to want to miss this).

However, we realize that getting everyone to upgrade is a pretty ambitious goal for a set of libraries with 34M downloads each month. We are already working on a backwards compat layer for React Router v5 users and will be testing it with several customers soon. Our plan is to develop a similar layer for Reach Router users as well. If you have a large app and upgrading to v6 seems daunting, don’t worry. Our backwards compat layer is on the way. Also, v5 will continue to receive updates into the foreseeable future, so don’t rush it."

Describe Preferred Solution

@ionic/react-router should update to React Router 6.

Describe Alternatives

Continue to use React Router 5 and make use of the backwards compatibility layer described in the blog post. However, from a long-term perspective, I worry about bugs with this approach: having Ionic control React Router though a BC layer could increase the difficulty of debugging.

Related Code

No response

Additional Information

It would be awesome to hear the Ionic team’s thoughts on a timeline for this. Could it be in a minor version update after v6 releases, or will it have to wait for v7?

[ptmkenny]

I know people are excited about this, but please STOP asking for updates. Every time someone posts to this thread, everybody who has subscribed gets a message.

If you want to get updates, press the subscribe button. You don’t need to post a message to get updates; just hit the subscribe button.

**If you want to show support for this issue, give my original post a thumbs up. That way you can show support without spamming everyone who has subscribed to the thread.

Update

Disclaimer: I am not affiliated with Ionic; I’m just the person who posted this issue.

This issue is postponed until the react-router team finishes their backwards compatibility package. As stated in the React Router guide for upgrading from 5 to 6:

We recommend waiting for the backwards compatibility package to be released before upgrading apps that have more than a few routes.

Ionic React has a large number of users, and there’s a lot of changes between react-router 5 and 6. At present, because the backward compatibility package isn’t ready, when you upgrade from react-router 5 to 6, you have to update all the routing in your app at once. This means the developer has to do a lot of work.

Ionic minor releases (6.1 to 6.2, for example) do not have major breaking changes. react-router 5 to 6 is currently a huge breaking change, so it is unlikely to land in ionic until version 7 (this is my guess, not an official statement from the ionic team).

Now, this might change if react-router releases a very easy-to-use backwards compatibility package, but that hasn’t happened yet.

If you want to see this happen faster, please consider stepping up, writing some code, and getting a PR started. Or go help react-router finish up their backwards compatibility work.

I’ll close by saying thank you to the Ionic and react-router teams, who have done fantastic work giving us great open source software.

[CooleyGit]

Is there any timeline on this?