Question

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

这就是奇怪的地方。我的登录和会话身份验证管道已经可以正常运行，但是登录后刷新页面时，路由器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()
}

希望有帮助。

React-router，Switch和Redux：路由莫名其妙地不呈现，没有错误

1 个答案: