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

[ShaneK]

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.

• Quickstart
• Your First App
• Add to Existing
• Navigation
• Updating from Ionic 8 to 9
• Tabs: Router Playground

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
ionic-docs	Ready	Preview, Comment	Mar 26, 2026 3:47pm

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

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>
	<Redirectexactpath="/"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.
	*/}
	<Routepath="/home"render={() => <HomePage />}exact={true} />
	<Routepath="/radio"render={() => <RadioPage />}exact={true} />
	<Routepath="/library"render={() => <LibraryPage />}exact={true} />
	<Routepath="/search"render={() => <SearchPage />}exact={true} />
	</IonRouterOutlet>

[ShaneK]

Excellent catch! Didn't even realize there were playgrounds for RR6. Fixed in d0f6f2f

[brandyscarney]

Do you also plan to update the React router dependencies here:

ionic-docs/static/code/stackblitz/v9/react/package.json

Lines 11 to 12 in 1307564

	"@types/react-router": "^5.1.11",
	"@types/react-router-dom": "^5.1.7",

[ShaneK]

Yep! Fixed in 76552ed, good additional call out

[brandyscarney]

Opened the React example at Tabs: Router, installed the dev build 8.8.1-dev.11774384072.1e807ca8 and ran the example. Everything looks good!

[brandyscarney]

Do you also plan to update the React router dependencies here:

ionic-docs/static/code/stackblitz/v9/react/package.json

Lines 11 to 12 in 1307564

	"@types/react-router": "^5.1.11",
	"@types/react-router-dom": "^5.1.7",

[brandyscarney]

Looks good! 🔀