React-router、Switch和Redux：路由莫名其妙不渲染，没有报错

Question

因此，我正在尝试使用 React 创建一个简单的聊天应用程序，该应用程序具有身份验证工作流程，并且登录的用户存储在 Redux 商店中。我在我的 App.js (react-router v4) 中设置了一个基本路由，它确保只有登录的用户才能访问实际的聊天屏幕。如果用户未登录，他们将被重定向到登录屏幕。现在，我还想保持会话（我正在使用 passport.js 在后端处理会话 cookie），这样如果已经登录的用户按下 F5 并刷新页面，我们就不必再次完成登录过程。这是通过调度一个 thunk 操作 (getLoggedUser()) 来完成的，该操作将简单地检查我们在浏览器中的 cookie 是否仍然被服务器接受，然后将用户对象重新加载到 Redux 存储区（prop loggedInUser）。

这就是奇怪的地方。我的登录和会话身份验证管道已经正常运行，但是当我登录后刷新页面时，路由器 Switch 内的路由根本不会呈现任何内容。我已经测试过正确的 Switch 确实被渲染了，但不知何故，该开关内的 Route 不会被渲染。这仅在成功登录后刷新时发生。我完全不知道是什么原因造成的。我尝试使用 react-router 包中的 withRouter 中间件，它什么也没做。我什至尝试在构造函数中延迟对 getLoggedUser() 的调用，以确保不存在某种竞争条件，但这也无济于事。

这是 App.js 组件的代码：

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect
} from 'react-router-dom';
import { connect } from 'react-redux';
import './App.css';

import MainChat from './components/MainChat';
import Login from './components/Login';
import { getLoggedUser } from './actions/';

class App extends Component {
  constructor(props) {
    super(props);
    this.props.getLoggedUser();
  }

  render() {
    return (
      <Router>
        <div className="App__container">
          {this.props.loggedInUser ? (
            <Switch>
              <Route path="/chat" component={MainChat} />
              <Redirect exact path="/" to="/chat" />
            </Switch>
          ) : (
            <Switch>
              <Route path="/login" component={Login} />
              <Redirect path="/" to="/login" />
            </Switch>
          )}
        </div>
      </Router>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  getLoggedUser: () => dispatch(getLoggedUser())
});

export default connect(
  state => ({ loggedInUser: state.auth.loggedInUser }),
  mapDispatchToProps
)(App);

有什么想法吗？

Answer 1

尝试将您的 getLoggedUser() 操作触发器放在 componentDidMount() 函数中，而不是您的构造函数中，如下所示：

ComponentDidMount(){
    this.props.getLoggedUser()
}

希望对你有帮助。