Почему не срабатывает Redirect react-router-dom?

Question

[Incold]

Здравствуйте! Столкнулся с небольшой проблемой.

import React, {useState, useEffect} from 'react';
import Navbar from './Navbar';
import {connect} from 'react-redux';
import Auth from './Auth';
import MainPage from './MainPage';
import { CSSTransition } from 'react-transition-group';
import {Route, Redirect, Switch, withRouter} from 'react-router-dom';

function App(props) {

  const [animation, showAnimation] = useState(false);

  useEffect(() => {
    showAnimation(true);
  })
  console.log(props.isLogin); // выводит правильно 
  return (
    <div className="d-flex flex-column flex-fill h-100">
      <Navbar />

      <Switch>
        <Route path='/auth' render={() =>
          <CSSTransition
            in={animation}
            timeout={500}
            classNames="login"
            unmountOnExit
          >
            <Auth />
          </CSSTransition>
        } />
        <Route path='/main' component={MainPage} />
        {props.isLogin ? <Redirect to="/main" /> : <Redirect to="/auth" />}
      </Switch>

    </div>
  );
}

export default withRouter(connect(
  state => ({
    isLogin: state.login.isLogin
  }),
  null
)(App));

Возможно, я просто неправильно использую Route и Redirect, но я хочу добиться чтобы при при изменении isLogin меня редиректило на главную страницу, isLogin меняется но url не меняется, соответственно не отображается главная страница. Как это исправить?

Заранее, спасибо, за любую помощь!

Answer 1

[Robur]

редиректить вас будет только если вы не на /main или /auth, иначе будут срабатывать первые два Route в Switch и до Redirect дело просто не дойдет.
можете добавить проверку props.isLogin в каждый Route
{props.isLogin && }
{!props.isLogin && }
но это не точно

https://reacttraining.com/react-router/web/example... еще посмотрите, как пример.