Ionic React Router

React Router (website)
https://reactrouter.com/docs/en/v6/getting-started/overview
- …Many examples in these docs as well.

Installation

npm install react-router@6
npm install react-router-dom@6
“@last” instead of “@6” did not work. My code had errors until I installed again without the @ tag on the end. (Feb 2022)

Import

import { IonReactRouter } from "@ionic/react-router";
- Plain React…
  - import { BrowserRouter } from "react-router-dom";
import { Route, Routes } from "react-router-dom";

Sub Tags

Do not appear to be supported by Ionic React:
- ...replaced by
- element property …replaced by component property
will only render the first matched child.

Example 1

<IonReactRouter>
  <IonRouterOutlet>
    <Route path="/home" component={Home} exact={true} />
    <Route exact path="/" render={() => <Redirect to="/home" />} />
  </IonRouterOutlet>
</IonReactRouter>

Example 2

<IonReactRouter>
  <IonRouterOutlet>
    <Route exact path="/home">
      <Home />
    </Route>
    <Route exact path="/">
      <Redirect to="/home" />
    </Route>
  </IonRouterOutlet>
</IonReactRouter>

Example 3

<IonReactRouter>
  <IonSplitPane contentId="main">
    <Menu />
    <IonRouterOutlet id="main">
      {/* <Route exact path={match.url} component={UsersListPage} /> */}
      {/* <Route path={`${match.url}/users/:id`} component={UserDetailPage} /> */}
      {/* <Route render={() => <Redirect to={match.url} />} /> */}
      <Switch>
        <Route path="/about" exact={true}>
          <AboutPage />
        </Route>
        <Route path="/" exact={true}>
          <HomePage />
        </Route>
        <Route path="*">
          <NotFoundPage />
        </Route>
      </Switch>
    </IonRouterOutlet>
  </IonSplitPane>
</IonReactRouter>

Example 5 - Nested

<Routes>
  <Route path="/" element={<App />}>
    <Route index element={<Home />} />
    <Route path="teams" element={<Teams />}>
      <Route path=":teamId" element={<Team />} />
      <Route path="new" element={<NewTeamForm />} />
      <Route index element={<LeagueStandings />} />
    </Route>
  </Route>
</Routes>