docs(react-router): updating docs to reflect react router 6 changes by ShaneK · Pull Request #4422 · ionic-team/ionic-docs

ShaneK · 2026-03-05T15:23:23Z

Description

This PR is preparing the docs for React Router 6 in v9. This PR covers updating the breaking changes for v9 documentation, the migration guide for react router 6, and the react quick start guide.

A large chunk of this PR (everything in v8) is fixing files that previously didn't comply with prettier so that CI will pass.

…tion guide

vercel · 2026-03-05T15:23:28Z

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

Project	Deployment	Actions	Updated (UTC)
ionic-docs	Ready	Preview, Comment	Mar 9, 2026 4:27pm

brandyscarney

There are a lot of unrelated changes on this PR that should be the same as whatever is on the major-9.0 branch. Additionally, running npm start locally fails with:

Error: MDX compilation failed for file "/Users/brandyscarney/Developer/ionic-docs/versioned_docs/version-v8/reference/glossary.md"
Cause: Expected the closing tag `</a>` either after the end of `paragraph` (551:103) or another opening tag after the start of `paragraph` (550:7)
Details:
{
  "column": 5,
  "message": "Expected the closing tag `</a>` either after the end of `paragraph` (551:103) or another opening tag after the start of `paragraph` (550:7)",
  "line": 551,
  "name": "551:5-551:9",
  "place": {
    "start": {
      "line": 551,
      "column": 5,
      "offset": 18407,
      "_index": 2,
      "_bufferIndex": 4
    },
    "end": {
      "line": 551,
      "column": 9,
      "offset": 18411,
      "_index": 2,
      "_bufferIndex": 8
    }
  },
  "reason": "Expected the closing tag `</a>` either after the end of `paragraph` (551:103) or another opening tag after the start of `paragraph` (550:7)",
  "ruleId": "end-tag-mismatch",
  "source": "mdast-util-mdx-jsx"
}
client (webpack 5.99.5) compiled with 1 error

I would recommend making a new branch off major-9.0, updating it from main, fixing any issues and lint errors on that branch and then merging that back into major-9.0. Update this branch from major-9.0 and then remove any unrelated file changes from this branch so it is purely RR6 related.

brandyscarney · 2026-03-09T17:53:17Z

docs/updating/9-0.md

+3. Update to React Router v6:
+
+```shell
+npm install react-router@6 react-router-dom@6
+```
+
+If you have `@types/react-router` or `@types/react-router-dom` installed, remove them. React Router v6 includes its own TypeScript definitions:
+
+```shell
+npm uninstall @types/react-router @types/react-router-dom
+```


I think we should put React Router in its own top-level section like React so it is easier to find and stands out more:

Suggested change

3. Update to React Router v6:

```shell

npm install react-router@6 react-router-dom@6

```

If you have `@types/react-router` or `@types/react-router-dom` installed, remove them. React Router v6 includes its own TypeScript definitions:

```shell

npm uninstall @types/react-router @types/react-router-dom

```

### React Router

1. Ionic 9 supports React Router 6. Update to version 6 of React Router:

```shell

npm install react-router@6 react-router-dom@6

```

2. If you have `@types/react-router` or `@types/react-router-dom` installed, remove them. React Router 6 includes its own TypeScript definitions:

```shell

npm uninstall @types/react-router @types/react-router-dom

```

brandyscarney · 2026-03-09T17:55:11Z

docs/updating/9-0.md

+npm uninstall @types/react-router @types/react-router-dom
+```
+
+#### React Router v6 Migration


Suggested change

#### React Router v6 Migration

Remove this header and just go into the steps to update

brandyscarney · 2026-03-09T17:59:03Z

docs/updating/9-0.md

+
+#### React Router v6 Migration
+
+Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make:


Suggested change

Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make:

Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make.

brandyscarney · 2026-03-09T17:59:18Z

docs/updating/9-0.md

+
+Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make:
+
+**Route Definition Changes**


Suggested change

**Route Definition Changes**

#### Route Definition Changes

Let's make these all headings so they can be linked to

brandyscarney · 2026-03-09T17:59:32Z

docs/updating/9-0.md

+ <Route path="/" element={<Home />} />
+```
+
+**Redirect Changes**


Suggested change

**Redirect Changes**

#### Redirect Changes

brandyscarney · 2026-03-09T18:00:45Z

docs/updating/9-0.md

+ <Route path="/sessions/:id" element={<SessionDetail />} />
+```
+
+**IonRoute API Changes**


Suggested change

**IonRoute API Changes**

#### IonRoute API Changes

brandyscarney · 2026-03-09T19:41:24Z

docs/react/your-first-app.md

Adding this here so it has a thread:

Don't we need to update the playgrounds as well or is that going to be done on a separate PR? See:

ionic-docs/static/usage/v9/tabs/router/react/main_tsx.md

Lines 19 to 30 in 1307564

<IonRouterOutlet>

<Redirect exact path="/" to="/home" />

{/*

Use the render method to reduce the number of renders your component will have due to a route change.

Use the component prop when your component depends on the RouterComponentProps passed in automatically.

*/}

<Route path="/home" render={() => <HomePage />} exact={true} />

<Route path="/radio" render={() => <RadioPage />} exact={true} />

<Route path="/library" render={() => <LibraryPage />} exact={true} />

<Route path="/search" render={() => <SearchPage />} exact={true} />

</IonRouterOutlet>

brandyscarney · 2026-03-09T19:43:24Z

docs/react/navigation.md

   */
  goBack(animationBuilder?: AnimationBuilder): void;
  /**
-   * Determines if there are any additional routes in the the Router's history. However, routing is not prevented if the browser's history has more entries. Returns true if more entries exist, false if not.


Can you fix this typo in v8 and v7 too just in case we re-deploy them?

brandyscarney · 2026-03-09T19:44:16Z

docs/react/add-to-existing.md

-:::important
-
-Ionic React Router currently only supports React Router v5. You must install the following specific versions of the router packages to set up routing with Ionic React.
-
-:::
-


Why was this removed? Shouldn't it be updated to v6 since we don't support v7?

brandyscarney · 2026-03-09T19:44:28Z

docs/react/add-to-existing.md

 ```bash
-npm install @ionic/react-router react-router@5 react-router-dom@5
-npm install @types/react-router-dom --save-dev
+npm install @ionic/react-router react-router react-router-dom


Why was the version removed? Shouldn't it be updated to v6 since we don't support v7?

ShaneK added 2 commits December 11, 2025 14:19

docs(react-router): working on v9 migration docs for react router

2b442d1

docs(react-router): update navigation guide and expand v5-to-v6 migra…

8fcf1cf

…tion guide

ShaneK requested a review from a team as a code owner March 5, 2026 15:23

ShaneK requested review from gnbm and removed request for a team March 5, 2026 15:23

vercel bot deployed to Preview March 5, 2026 15:30 View deployment

vercel bot had a problem deploying to Preview March 5, 2026 15:47 Failure

ShaneK force-pushed the v9/react-router branch from e01754d to 83dc1d4 Compare March 5, 2026 15:50

vercel bot had a problem deploying to Preview March 5, 2026 15:53 Failure

chore(lint): running lint

bcf73fe

ShaneK force-pushed the v9/react-router branch from 83dc1d4 to bcf73fe Compare March 5, 2026 16:07

vercel bot had a problem deploying to Preview March 5, 2026 16:09 Failure

brandyscarney requested changes Mar 9, 2026

View reviewed changes

vercel bot deployed to Preview March 9, 2026 15:54 View deployment

ShaneK force-pushed the v9/react-router branch from c18a33d to eb963d7 Compare March 9, 2026 15:58

vercel bot deployed to Preview March 9, 2026 16:02 View deployment

fix(build): fixing build error

12981ad

ShaneK force-pushed the v9/react-router branch from eb963d7 to 12981ad Compare March 9, 2026 16:23

vercel bot deployed to Preview March 9, 2026 16:27 View deployment

ShaneK requested a review from brandyscarney March 9, 2026 16:29

brandyscarney requested changes Mar 9, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

docs(react-router): updating docs to reflect react router 6 changes#4422

docs(react-router): updating docs to reflect react router 6 changes#4422
ShaneK wants to merge 4 commits intomajor-9.0from
v9/react-router

ShaneK commented Mar 5, 2026 •

edited

Loading

Uh oh!

vercel bot commented Mar 5, 2026 •

edited

Loading

Uh oh!

brandyscarney left a comment

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

brandyscarney Mar 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants


		#### React Router v6 Migration

		Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make:


		Ionic React now requires React Router v6, which has a different API from v5. Below are the key changes you'll need to make:

		Route Definition Changes

	<IonRouterOutlet>
	<Redirect exact path="/" to="/home" />
	{/*
	Use the render method to reduce the number of renders your component will have due to a route change.

	Use the component prop when your component depends on the RouterComponentProps passed in automatically.
	*/}
	<Route path="/home" render={() => <HomePage />} exact={true} />
	<Route path="/radio" render={() => <RadioPage />} exact={true} />
	<Route path="/library" render={() => <LibraryPage />} exact={true} />
	<Route path="/search" render={() => <SearchPage />} exact={true} />
	</IonRouterOutlet>

Conversation

ShaneK commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Uh oh!

vercel bot commented Mar 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ShaneK commented Mar 5, 2026 •

edited

Loading

vercel bot commented Mar 5, 2026 •

edited

Loading