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 router@6.1.9_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.

[FranciscoKloganB]

It's very sad that Ionic still hasn't catched up to react router 6. So many things are great about it, ranging from better developer experience to better features that enable better user experience. Backwards compability is important, but starting a new ionic project and being tied to react router 5 kind of sucks. Ionic could introduce a breaking change. Companies don't need to bump if they don't feel ready to. :(

It's been 2 years since this feature request was first opened.

[Berkmann18]

@FranciscoKloganB I totally agree. And looking at https://forum.ionicframework.com/t/ionic-react-so-many-render-issues-related-to-routing/222301/20, it seems like it's been a Work In Progress since mid-April (so nearly 6 months ago).

[inouiw]

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

@sean-perkins Supporting two versions if the api and the behaior is not exactly the same will likely be quite a lot of more work than just supporting v6 and fixing any bugs that may surface.

[nadavhalfon]

We really appreciate your work 🙏🏻 If you can tell us a little bit about where are you standing regarding the development it'll be nice. I couldn't find an active branch or progress, I'm sure you are working on this but just to understand and to light the situation 🙏🏻 Thanks !

[020AlievIB]

Do Ionic 7 support React Router v6?

[nadavhalfon]

Do Ionic 7 support React Router v6?

As for now, no

[nadavhalfon]

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

Hey team! All of the most voted issues in react are related to the ionRouter (animation problems, white screens and etc.), some of them are related to fallback routes and some are not. I assume that you plan to support it on the next major (aka. ionic 8) because of the migration process people will have to do. Unrelated to react router 6 I really think that the ionic react router is the main blocker to use ionic react for production (at least in our case), it has many problems that could have been resolved anyway. Because we don't know what is your progress or general schedule, we don't know if to take a look and help with something that you might already changed. Let me be clear I am sure that you are working on it and plan to do those improvements and fixes, it's been almost 6 months since the last update, so I'll really appreciate if you can give us a small update (even that your'e stuck will be good so we won't develop any hopes for our production schedule)

Thank you!

[nkeysinstil]

This would be really useful as it has blocked us from using https://ionicframework.com/docs/api/tabs

[nadavhalfon]

Hey, you announced Ionic 8 and still remain silence regarding this issue, It'll be very nice from the Ionic team to shine some bright on this issue, 2 years passed, 2 majors, at least tell us if it's intended to be on ionic 8 or not, people (including me) really trying to be patient and wait but you are not answering since Aug 23'

Thank you

[Brian-McBride]

Current State

About a year ago, I looked into adapting v6 to my Ionic toolkit and uploading a PR.

The React Router team has really moved into an SSR paradigm, and their updated library removed some of the functionality that v5 had. This, combined with the Iconic team being Angular developers, is my guess that there is a complete lack of progress here.

SSR routing and the trend in web development are entirely different from mobile stack and tab navigation. Most of these libraries rely on the browser's built-in history. Some new mobile navigation features are even coming built-in to the browser, making it even less urgent for these teams to invest time.

Solutions

1. Create a universal Ionic Router

This is really what the Ionic team should do. They already built a stack/tab navigation for Angular. It works better in all regards. The best thing to do is optimize it so that the core route management is agostic to any UI platform. Just really a state machine for routing. Then, build interface layers for Angular, Vue, and React. The community could then expand upon that.

2. Bail on Ionic for routing: Framework7

I have not used it in production. However, I will say that https://framework7.io/ had a much better router in place for React. Of course, if you end up using that router, you could use the entire framework for UI.

The guy who maintains it also has a tailwind version, https://konstaui.com/, which is pretty cool. However, the core Framework7 is more maintained.

Keep in mind, Framework7 and similar libs work with Capictor just fine.

[dbousamra]

Any further updates?

[FranciscoKloganB]

We are on our way to react-router-7. Hope ionic/react does not become obselete. I really like expo, but there are use cases that simply don't justify using native.

If we can't use react-router-6 and so on, at least create a fork of react-router-5 and create a custom router from there, like you did for Angular.

[nadavhalfon]

@FranciscoKloganB I agree with you but what really is not making sense is why the ionic team doesn't say what's this issue status, I would really appreciate even if you say that you have no progress or no intentions for making this change so at least we know for sure it's wroth forking it why is it so hard to give an update here in the comments? thank you if you reply, just want some transparency 😁

[krishanmarco]

This is not a production solution but it will work for not too complex web/mobile apps - We have, at least managed to prototype this but still have to deal with the nitty gritty part of actually synching up the browser history between react-router@5 and react-router@6 in a sane manner - If that's even possible.

Anyways

Install react-router@5 alongside your current react-router@6

{
  "dependencies": {
    "react-router-v5": "npm:react-router@5.3.4",
    "react-router-dom-v5": "npm:react-router-dom@5.3.4",    
    "react-router-dom": "6.22.3",
  }
}

Place all the ionic react dependencies in a subfolder of your project (Say src/ionic)

then

Use your bundler to ensure that all the react-router-dom and react-router imports coming from the src/ionic folder and ionic's dependencies point to react-router-dom-v5 instead of react-router-dom

At @closeio we use webpack and It looks like this:

 ...[
      { regex: /^react-router-dom$/, target: 'react-router-dom' },
      { regex: /^react-router$/, target: 'react-router' },
    ].map(({ regex, target }) => {
      return new NormalModuleReplacementPlugin(regex, function (resource) {

        // All the ionic dependencies should point to v5
        const mobileContextMatchers = [
          /.*\/@capacitor.*/gi,
          /.*\/@ionic.*/gi,
          /.*\/ionicons.*/gi,
          /.*\/\.pnpm\/react-router-dom@5\.3\.4_react.*/gi,
          /.*\/mobile\/src.*/gi,
        ];

        const shouldUseRR5 = mobileContextMatchers.some((s) =>
          s.test(resource.context),
        );

        console.log(resource.context, `on ${target} shouldUseRR5=${shouldUseRR5}`);

        if (shouldUseRR5) {
          resource.request = `${target}-v5`;
        } else {
          resource.request = target;
        }
      });
    }),

We then rendered the React Router 6 RouterProvider with a child route. The child route imports and renders the IonApp which circles back and renders components from our actual app.

This works and I'll post again if we can get a decent enough compatibility layer between the two in a way that makes them play nice together.