Ionic React routing problem

I am new in ionic framework. I have a problem in my app. App.tsx code:

<IonApp>
    <IonReactRouter>
        <IonRouterOutlet>
            <Route path="/" render={() => this.state.isLoggedIn ? <Home /> : <Login />} />
            <Route path="/settings" render={() => <Settings />} exact={true} />
            <Route path="/signup" component={SignUp} exact={true} />
            <Route path="/addContact" render={() => <AddContact />} exact={true} />
        </IonRouterOutlet>
    </IonReactRouter>
</IonApp>

When I click the button to which I provided routerLink then the routerLink is added into url’s href. But the component is not shown. When I reload the page then the component is shown. Please Help!

Not a lot to go off of from just this, could you provide a sample github repo that we can use to debug?

HammadIftikhar82/myApp: Please solve my error. (github.com)
This is my repo.

Sir! Please solve my problem.

Please do not demand help. We review posts when ever we are able to.

You were missing an exact={true} on the root Route

      <IonApp>
        <IonReactRouter>
          <IonRouterOutlet>
            <Route exact={true} path="/" render={() => this.state.isLoggedIn ? <Home /> : <SignIn />} />
            <Route exact={true} path="/settings" component={Settings}  />
            <Route exact={true} path="/signup" component={SignUp}  />
            <Route exact={true} path="/addContact" component={AddContact}  />
          </IonRouterOutlet>
        </IonReactRouter>
      </IonApp>
1 Like