fix(react-router): support React Router 6 style relative paths in IonRouterOutlet

[ShaneK]

Issue number: resolves an issue from a comment

---

What is the current behavior?

Currently, Ionic's RR6 doesn't support relative routes in the same way RR6 does. Routes that do not start with a /do not work in the Ionic RR6 implementation in some cases.

What is the new behavior?

With this change, we properly support these route styles and more closely align with normal RR6 route support.

Does this introduce a breaking change?

• [ ] Yes
• [X] No

Other information

Current dev build:

 8.7.12-dev.11765307927.1f491e92

This PR will be merged into the RR6 branch, which will be squash+merged into the major 9 branch. This will prevent major 9 from having commits in the change log on release that reference fixing things that are only available in major 9.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Dec 12, 2025 7:55pm

[ptmkenny]

I think there is a minor documentation issue here: Routes that start with a / do not work in the Ionic RR6 implementation. should be Routes that **do not** start with a / do not work in the Ionic RR6 implementation.

[ptmkenny]

I just installed the test branch for this:

 npm install @ionic/[email protected] @ionic/[email protected] @ionic/[email protected]

Unfortunately, this immediately breaks my app. npm run dev shows this error on the index page:

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

I have all my Route components wrapped in IonRouterOutlet, not Routes (to match the structure of the code used in the tests). This was working with the other build, but in this build, I get the above error.

Changing all IonRouterOutlet components to Routes components works-- I can then navigate around my app normally.

[ShaneK]

@ptmkenny Can you provide a reproduction of this? I can't see how this change would cause that and I can't see how the e2e tests would be passing (much less building) if this were happening. For example, this newly added one in this PR, which uses IonRouterOutlet + Route

[ptmkenny]

@ShaneK Sorry about that, it seems there was some weird caching issue that caused that error. I rebooted the machine, blew away all the caches, and I could build my app again with the new build.

However, it seems that not having a slash in a root-level route will still break the app. See the repro here: https://github.com/ptmkenny/ionic-react-router-6-test/tree/router-outlet

I put the reproduction instructions in the README.md. Also, note that in addition to adding the slash (for IonRouterOutlet), you can also replace IonRouterOutlet with Routes (without adding the slash) and the page will be shown.

[ShaneK]

@ptmkenny Wow, that was a big one! I don't know how I didn't have that as a test case before, but I do now.

I have a dev build up that will hopefully work for you now, as well as having this case as part of my E2E tests:

 8.7.12-dev.11765307927.1f491e92

[ptmkenny]

@ShaneK Thank you for the speedy fix, but it seems to be a little more complicated.

Follow-up: https://github.com/ionic-team/ionic-framework/issues/24177#issuecomment-3637401533

[ShaneK]

That would be a new issue, not the same one. You should report it in the main thread and I'll deal with it in another PR