feat: React Router v6 support

[ptmkenny]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] 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?

[fortesp]

I also have this question. Now that we have Ionic version 6, i was trying to upgrade to react router version 6 as well, but it seems not yet possible.

I get the following error:

Creating an optimized production build...
Failed to compile.

./node_modules/@ionic/react-router/dist/index.esm.js
Attempted import error: 'withRouter' is not exported from 'react-router-dom'

[ptmkenny]

@fortesp This is a feature request, not a bug report. Upgrading to react router v6 is not supported in Ionic now, and it will not be until the Ionic team adds code to support it; there's no "workaround" unless you want to write the code and contribute a PR yourself.

[fortesp]

@ptmkenny not reporting any bug, just enforcing the idea. Not sure i understand the rest of your comment. The idea is to understand when it will be supported.

[zhangriyueming]

Like to hear a timeline for this.

[ghost]

the ionic upgrade guide mentions react-router v6 here (https://ionicframework.com/docs/intro/upgrading-to-ionic-6#react), so isn't this solved? Although there's no upgrade guide for the router yet.

[ptmkenny]

@jrobeson No, this is not solved. The documentation refers to @ionic/react-router, which is Ionic's custom implementation of react-router. @ionic/react-router v6 is based on react-router v5, and this issue is about updating @ionic/react-router to react-router v6.

[ghost]

@ptmkenny : yeah i accidentally read it as react-router. my fault. sorry.

[RayZik]

Hi! Any updates?

[CooleyGit]

Is there any timeline on this?

[XueMeijing]

Hi! Any updates?

[christianmat]

Any updates?

[daniel-escoto]

Any updates??

[I-am-abdulazeez]

Any update, please??

[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.

[ghost]

The only thing I wonder is why the react-router version requirement doesn't have <6.0.0 in it until the BC package is implemented.

[mahdisoultana]

hi please any update i get this error WARNING in ../../node_modules/.pnpm/@ionic+react [email protected]_7txecbm3l2m4zu24te5q2csakq/node_modules/@ionic/react-router/dist/index.esm.js 697:18-28 export 'withRouter' (imported as 'withRouter') was not found in 'react-router-dom'

any Update on that ???

[DercilioFontes]

@Mahdi-Soultana,

React Router v6 is not supported. You need to use v5.

[Brian-McBride]

I dropped this in the forums as well. Mainly I'm hoping to get some help to iron out the issues. It's "mostly" there, I just see a couple of areas where the animations are not right.

I am pretty sure it is due to the ViewStacks that I didn't use. There might need to be some additional lifecycle stuff dealing with parent outlets and their visibility. Maybe someone on the Ionic team who wrote the @ionic/react-router can take a look into this updated StackManager. It is largely the same, other than using the elements from the react-router-dom outlet to render the current page and stashing a ref to the previous page that was rendered to handle an animation after the page reloads.

https://www.npmjs.com/package/@anatine/ionic-react-router

https://github.com/anatine/ionic-modules

[liho00]

react router v6 is awesome, im using react router v6 instead of @ionic/react-router now, and build my own navigation transition. Hope @ionic/react-router can adopt react router v6 sooner

[Brian-McBride]

react router v6 is awesome, im using react router v6 instead of @ionic/react-router now, and build my own navigation transition. Hope @ionic/react-router can adopt react router v6 sooner

I am curious on your method on animating one view over another and how you are dealing with the stack to pop off views and all that. Also, are you using CSS animation directly or something like Framer Motion?

[kevinclarkadstech]

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.

The point of asking for updates is not to spam people subscribed to the topic, but help show how this is a high demand topic that should receive focus.

And I will be the next to ask ...ANy updates? I am about to file a bug because I cannot update. If Ionic want to use the library routers for React, Vue, and Angular, they need to keep their wrapper package up to date with major versions of the library routers. If it was really released in Nov last year, that should be enough time to make changes to upgrade ionic-react-router to v6.

[ptmkenny]

A member of the Ionic team posted an update on the status of React Router 6 support here.

If there is high demand, give it a thumbs up. Don't spam.

[kevinclarkadstech]

A member of the Ionic team posted an update on the status of React Router 6 support here.

If there is high demand, give it a thumbs up. Don't spam.

If I hadn't "spammed", then I would not know about that link with the update, now would I? 🙄

[piotr-cz]

I think that new major ionic release v7.0.0-beta.0 is an opportunity to reevaluate react-router v6 support.

[ebk46]

What about https://www.npmjs.com/package/react-router-dom-v5-compat? Seems like a relatively straightforward way to introduce compatibility with react-router v6.

[michaelmota]

Any updates?

[Brian-McBride]

Any updates?

I've given up on the hope of a modern React router. I think the Iconic team is comprised of Angular devs, and the React port is really just that - a wrapper around the web components designed for Angular.

It isn't the same, but Framework7 has a pretty nice mobile router. It is completely custom, not based on React Router at all. But has a solid navigation stack. I found it to be a good option on my last project.

[salemlf]

Any updates?

I've given up on the hope of a modern React router. I think the Iconic team is comprised of Angular devs, and the React port is really just that - a wrapper around the web components designed for Angular.

It isn't the same, but Framework7 has a pretty nice mobile router. It is completely custom, not based on React Router at all. But has a solid navigation stack. I found it to be a good option on my last project.

Yeah, it's disappointing. I was looking into Tanstack Router, but not ideal as it's still in beta. Also not sure if it'd be compatible with Ionic's Capacitor/Cordova functionality for iOS and Android

[craigbehnke]

@sean-perkins I noticed you did a weekend project for this issue back on the July 4th long weekend -- is this branch eventually intended to be included in an @ionic/react-router release, or was it more of a hackathon experiment? If it was the latter, did you learn anything that might impact when/if a fix for this issue is released?

[sean-perkins]

@craigbehnke it is unlikely that that branch will be the intended changes for React Router v6 support. It was mainly discovery to identify the work effort, pain points and path that Ionic Framework can take to upgrading the package.

I have not looked into the compatibility package, but that is another path worth exploring.

Ionic's router implementation makes use of class components (mainly the StackManager), which need to be migrated to hooks before they can be used with React Router v6. Many of the other changes in v6 (internalizing the history API, etc.) were fairly straightforward to navigate and function at some capacity in my discovery work.

Developers will need time to migrate their apps to React Router v6 once Ionic provides support. I think it is likely we will run both v5 and v6 support in parallel for a time, to help resolve any v6 specific challenges before making it the default version and deprecating v5 support.

We plan to support v6, but we do not have any specific timeline to share at this time. This is our most upvoted and community followed feature request, so we are actively working to bring this to you all.