Issue with navigation after login

Hi all,
I am having an issue with my login redirect. i have 2 Router and i want to switch when i log in or out between these 2. but my issue is you only see the switch is made after you refresh.
If somebody could help me out with this

my routes

const Routing: React.FC = () => {
    return (
        <IonApp>
          <IonReactRouter>
              <IonRouterOutlet>
                <Route path="/login" component={Login} exact={true}>
                </Route>
                <Route path="/register" component={Register} exact={true}>
                </Route>
                <Route exact path="/">
                  <Redirect to="/login" />
                </Route>
              </IonRouterOutlet>
          </IonReactRouter>
        </IonApp>
    );
};

const RoutingAfterLog: React.FC = () => {
  return (
      <IonApp>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/department" component={Department} exact={true}>
              </Route>
              <Route path="/department/id/products" component={Products} exact={true}>
              </Route>
              <Route path="/department/id/products/id" component={Product} exact={true}>
              </Route>
              <Route path="/home" component={Home} exact={true}>
              </Route>
              <Route path="/user" component={User} exact={true}>
              </Route>
              <Route exact path="/">
                <Redirect to="/home" />
              </Route>
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="department" href="/department">
                <IonIcon icon={cube} />
                <IonLabel>Stock</IonLabel>
              </IonTabButton>
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="user" href="/user">
                <IonIcon icon={person} />
                <IonLabel>User</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonApp>
  );
};

here i check if i switch user state

useEffect(() => {
    getCurrentUser().then((user: any) => {
      if (user) {
        // logged in. Dispatch action from redux store in actions.ts file
        dispatch(setUserState(user.email));
        console.log(firebase.auth().currentUser?.email);
        //return <IonApp><RoutingAfterLog /></IonApp>;
        setUser(true)
        window.history.replaceState({}, "", "/home");
      } else {
        setUser(false)
        window.history.replaceState({}, "", "/");
      }
    });
  }, [dispatch]);

1 post - 1 participant

Read full topic