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]);