React router default route

Hi,
I’m struggling to create a router with a default route, so when a url matches none of the route I defined, it redirects to ‘/home’.

I have created a fresh Ionic react app using the command : ionic start blank-ionic-react-app blank --type=react

I only modified the App component.

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      {/* <IonRouterOutlet> */}
        <Route exact path='/home' render={() => {
          console.log("render path='/home'");
          return <Home />
        } } />

        <Route exact path='/toto' render={() => {
          console.log("render path='/toto'");
          return <Toto />
        } } />

        <Route       path='/'     render={() => {
          console.log("render path='/'");
          return <Redirect to="/home" />
        } } />


      {/* </IonRouterOutlet> */}
    </IonReactRouter>
  </IonApp>
);

And created a simple Toto component:

function Toto (props: any) {
  return <div>toto</div>
}

when I go to the url ‘/home’, the Home component is displayed, here are the logs:

render path='/home'
render path='/'
render path='/home'
render path='/'

when I go to the url ‘/toto’, the Home component is displayed, here are the logs:

render path='/toto'
render path='/'
render path='/home'
render path='/'

From what I understood, the first route matching the current url shall be rendered. But what I see seems to indicate that the last route matching the url is rendered.

So the question is, how can I set a default route so if the url is neither ‘/home’ or ‘/toto’, it gets redirected to ‘/home’ ?

Thanks
Arthur

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>
);

@mhartington that’s helpful… before switch was not supported inside IonRouterOutlet… I guess I missed the update

:man_shrugging:

I have not confirmed if switch is supposed to work, but I haven’t seen any issues so far.

i just tested it, it works!! the doc should be updated… is there a way to submit a PR or open an issue so the documentation is updated

Docs can be found here

PRs should be made in this repo

Here’s the page I think you want, and here’s the contributing guide.

It is working ! thank you for your help