React Router 3 не рендерит правильный компонент

Question

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

Базовый пример настройки: ...

Auth Component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { createSelector } from 'reselect';
import { auth } from '../../firebase';
import { replace } from 'react-router-redux';

export default (WrappedComponent, {}) => {
  class Authentication extends Component {
    componentWillMount() {
      auth.onAuthStateChanged(user => {
        if (user) {
          // User is signed in.
          console.log('USER IS SIGNED IN');
        } else {
          // No user is signed in.
          console.log('USER IS NOT SIGNED IN');
          this.props.dispatch(replace('login'));
        }
      });
    }

    render() {
      return <WrappedComponent>{this.props.children}</WrappedComponent>;
    }
  }

  return connect(
    null,
    null
  )(Authentication);
};

Маршруты

import React from 'react';
import Loadable from 'react-loadable';
import { Router, Route, IndexRoute } from 'react-router';
import AuthenticationComponent from './containers/Authentication';
import App from './components/App';

const AsyncRoute = loader =>
  Loadable({
    loader,
    loading: () => <h3>Loading...</h3>,
    delay: 300,
  });

const LandingPage = AsyncRoute(() =>
  import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage')
);

const Login = AsyncRoute(() =>
  import(/* webpackPrefetch: true, webpackChunkName: "login" */ './containers/Login')
);

const NotYetImplemented = () => <h6>Not Yet Implemented...</h6>;

export default ({ history }) => (
  <Router history={history}>
    <Route path="/" component={AuthenticationComponent(App, {})}>
      <IndexRoute component={LandingPage} />
    </Route>
    <Route path="/login" component={Login} />
  </Router>
);

В настоящее время, когда Firebase сообщает, что пользователь не аутентифицирован, маршрутобновляется и отображается как http://localhost:3001/login, однако компонент LandingPage отображается.

Если я обновлю страницу на /login, то получу правильный компонент.

Я выгружен replace для push, но результат тот же.

Answer 1

как @Boo сказал, что вы должны использовать точное или вы можете использовать switch и Route вместо этого, как это

import { Switch, Route} from 'react-router-dom'
<Switch>
  <Route path='/'      component={ HomePage } exact />
  <Route path='/login' component={ LogIn }    exact />
</Switch>

и использование

Перенаправление

вы можете сделать что-то подобное (код ниже) вместо того, чтобы отправлять действие в redux, и это будет работать наверняка

    import { Redirect } from 'react-router'
    export default (WrappedComponent, {}) => {
      class Authentication extends Component {
        state = { redirect : false }
        componentWillMount() {
          auth.onAuthStateChanged(user => {
            if (user) {
              // User is signed in.
              console.log('USER IS SIGNED IN');
            } else {
              // No user is signed in.
              console.log('USER IS NOT SIGNED IN');
              //this.props.dispatch(replace('login'));
              this.setState({redirect : true})
            }
          });
        }

        render() {
          const {redirect } = this.state
          if(!redirect){
          return <WrappedComponent>{this.props.children}</WrappedComponent>;
          } else {
          return <Redirect to='where ever you want' />
        }
      }