feat: React Router v7 support

[ptmkenny]

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

Ionic React currently uses React Router 5, which is tagged as classic on yarn.

React Router v6 received a stable release on November 3, 2021. Three years passed and Ionic released Ionic React versions 6, 7, and 8, but none of these supported React Router 6.

React Router v7 received a stable release on November 22, 2024.

It would be great to be able to use a version of React Router that is actively being updated and makes use of the new features in React 18 and 19.

Describe the Use Case

React Router 7 adds optional Remix features to React Router as "framework mode". In addition, it has code splitting features with React 18 and 19 that v5 does not.

Describe Preferred Solution

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

Issues Fixed in React Router 6/7 but not 5

React Router 5 is only getting critical security fixes since development has effectively ended.

• [Bug]: params encoded with encodeURIComponent incorrectly decoded if they contain % and other special characters remix-run/react-router#10814

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

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.

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