Реагировать на перенаправление маршрута Firebase Authe после входа в систему

Question

Я пытаюсь перенаправить пользователя в UserProfile после входа в систему. Я могу успешно войти в систему, но после входа в систему не могу понять, почему он не перенаправляет меня на страницу UserProfile.

Не уверен, что я делаю не так. Кто-нибудь может взглянуть на это?

Приложение. js

// ...
import { BrowserRouter, Route, Switch, Redirect } from 'react-router-dom';

class App extends Component {
  this.state = {
    isLoggedIn: null,
  };

  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => {
      if (user) { this.setState({ isLoggedIn: true })} 
      else { this.setState({ isLoggedIn: false })}
    })
  }

  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path='/' component={Landing} exact />
          <Route path='/login' component={Login} />
          <Route path='/user-profile' render={() => (
            this.state.isLoggedIn ? <UserProfile /> : <Redirect to='/login' />
          )} />
        </Switch>
      </BrowserRouter>
    );
  } 
}

export default App;

Вход. js

// ...
import { withRouter } from 'react-router-dom'

class Login extends Component {
    this.state = {
        // ...
    };

    _handleSubmit = (e) => {
        e.preventDefault();
        firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
            .then(() => {
                // ...
                this.props.history.push('/recipe-form')
            }).catch((error) => {
                // ... 
            });
    }

    render() {
        return (
            <form onSubmit={(e) => this._handleSubmit(e)}>
                <Input //...Email />
                <Input //...Password />
                <Button text='Login' type='submit' />
            </form>
        );
    }
}

export default withRouter(Login);

Answer 1

Проверяющий, который вы ставите

<Route path='/user-profile' render={() => ( this.state.isLoggedIn ? <UserProfile /> : <Redirect to='/login' /> )}/>

, здесь говорит, что если пользователь в данный момент находится на пути user-profile и он не вошел в систему, он должен предположить, что он перенаправлен, но это ничего не говорит о пользователе, который в данный момент находится в login пути.

Вы можете добавить те же (но противоположные) логы c к Route логин и пароль -

<Route path='/login' render={() => ( !this.state.isLoggedIn ? <Login /> : <Redirect to='/user-profile' /> )}/>

или добавьте Redirect в Login сам компонент после успешной попытки входа в систему