React Router 3 没有渲染正确的组件答案

【问题标题】：React Router 3 not rendering correct componentReact Router 3 没有渲染正确的组件
【发布时间】：2018-12-03 04:04:39
【问题描述】：

我有一个用于身份验证的组件，如果用户未通过身份验证，我想将他们推送到登录页面。

设置的基本示例是...

身份验证组件

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，但结果相同。

【问题讨论】：

你在哪里检查 props 的更新？如何知道何时重新渲染它自己
我不听对不起，你能解释一下吗？
试试改成<Route exact path="/" component={AuthenticationComponent(App, {})}>

标签： reactjs react-router react-router-redux

【解决方案1】：

就像@Boo说你必须使用exact或者你可以像这样使用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' />
        }
      }

【讨论】：