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 13, 2026 7:43pm

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

[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",

[brandyscarney]

I wouldn't change this here since it is the same on all of the other framework guides, unless you plan on updating all of them:

ionic-docs/docs/vue/add-to-existing.md

Line 64 in d997c6b

While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).

ionic-docs/docs/angular/add-to-existing.md

Line 79 in d997c6b

While `core.css` is required, `normalize.css`, `structure.css`, and `typography.css` are recommended but not required. They normalize cross-browser differences, ensure proper scrolling behavior, and provide consistent typography and form styling. Without them, you may need to handle these concerns yourself. For more details, refer to [Global Stylesheets](/docs/layout/global-stylesheets.md).

[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",