Ionic React routing problem

Ionic Framework Ionic React
1

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!

2

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

3

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

4

Sir! Please solve my problem.

5

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>
2 Likes
6

for default route
use exact={true} . this worked for me