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

1 post - 1 participant

Read full topic