Confuse between IonNav and History

Ionic Framework
1

Hi, I’m working on a Ionic 4 + React project, and here is my App.tsx:

import LogIn from './pages/LogIn';
import FBLinking from './pages/FBLinking';
...
  <IonApp>
    <IonNav root="login"></IonNav>
    <IonReactRouter>
      <IonPage>
        <IonRouterOutlet>
          <Route path="/home" component={Home} exact={true} />
          <Route path="/login" component={LogIn} exact={true} />
          <Route path="/fb" component={FBLinking} exact={true} />
          <Route exact path="/" render={() => <Redirect to="/login" />} />
        </IonRouterOutlet>
      </IonPage>
    </IonReactRouter>
  </IonApp>

So login page is my landing page when the app launch. From the login page, when the user successfully login, I manage to navigate to the “fb” page using this JavaScript:

this.props.history.push('/fb');

I have a modal window opened in the login page, but when I navigate to the “fb”, the modal still exist, what’s the proper way to clear everything and set my “fb” page as the New Root?

Thanks!