Всем привет! Есть аутентификация в реакт приложении, после успешного логина происходит редирект на "/ " через useHistory и соответственно смена состояние isAuth с false на true, но при этом сама эта страница на которую идети редирект остается в состоянии isAuth false и не рендерит то, что мне нужно, делает это только после перезагрузки/обновления страницы, подскажите как это можно исправить и сделать так, чтобы после успешного логина я сразу переходил на " / " и там у меня рендерилось то, что мне нужно, если ты залогинен.
Login.js :
const Login = () => {
const [email, setEmail] = useState("")
const [password, setPassword] = useState("")
const isAuth = useSelector(state => state.user.isAuth)
const dispatch = useDispatch()
let history = useHistory();
return (
<>
<form onSubmit={() => history.push("/")} >
<div className='authorization'>
<Input value={email} setValue={setEmail} type="text" placeholder="Введите email..."/>
<Input value={password} setValue={setPassword} type="password" placeholder="Введите пароль..."/>
<Btn1><Button type="submit" className="authorization__btn" onClick={() => dispatch(login(email, password))}><Text>Submit</Text></Button></Btn1>
</div>
</form>
</>
);
};
export default Login;
MainPage.js :
const MainPage = () => {
const isAuth = useSelector(state => state.user.isAuth)
const dispatch = useDispatch()
return (
<>
<MainPage>
{!isAuth && <Buttons>
<Btn1>{!isAuth && <Button className="btn1"><Link to="/login" style={linkStyle}><Text>Sign In</Text></Link></Button> }</Btn1>
<Btn2>{!isAuth && <Button className="btn2"><Link to="/registration" style={linkStyle}><Text>Sign Up</Text></Link></Button> }</Btn2>
</Buttons> }
{isAuth && <Button onClick={() => dispatch(logout()) }><Text>Sign Out</Text></Button> }
{isAuth && <NewPage />}
</MainPage>
</>
);
};