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

@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

If you use the switch you will use the animations, since it will only render the first route it matches.

One way to solve this was if, inside IonRouterOutlet, the redirects would work like in a switch. The others would work like they do today to allow the animations to happen.