React router default route

Ionic Framework Ionic React
2

Pulling in the example we have in the base starter project:

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Route path="/home" component={Home} exact={true} />
        <Route exact path="/" render={() => <Redirect to="/home" />} />
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);

Basically, if you want to catch any unmatched routes, you would use the * path for the route.

So something like

<Route path="*" render={() => <Redirect to="/home" />} />

But you’ll also need to use a Switch

So all together, you’ll get

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonRouterOutlet>
        <Switch>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/" render={() => <Redirect to="/home" />} />
          <Route path="*">
            <Redirect to="/home" />
          </Route>
        </Switch>
      </IonRouterOutlet>
    </IonReactRouter>
  </IonApp>
);
1 Like