无法使react-router 4渲染路由正确

Question

我使用react，redux和webpack获得了这个简单的应用程序

// entry.js
import React from "react";
import {render} from "react-dom";
import { Provider } from "react-redux";
import { Router } from "react-router-dom";
import createHistory from 'history/createBrowserHistory'

import store from './containers/store/index';
import App from './components/App.jsx';

const history = createHistory();

render((
  <Provider store={store}>
    <Router history={history}>
      <App history={history} />
    </Router>
  </Provider>),
  document.getElementById('root')
)

如果用户未登录（userInfo为null），那么我希望路径为/并渲染Home组件，当用户登录时，我希望路径为/lobby并渲染Lobby组件。

但是，尽管浏览器中的路径发生了变化，但Home组件仍然呈现。只有当我第二次点击它然后渲染Lobby。我的错是什么？

// App.js
import React, { Component } from 'react';
import {connect} from "react-redux";
import { Switch, Route } from "react-router-dom";

import Profile from "./Profile";
import Lobby from "./Lobby";
import Home from "./Home";
import Signin from "./Signin";

const mapStateToProps = state => {
  return { userInfo: state.userInfo };
};

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

  updateHistory() {
    if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
      this.props.history.replace("/");
      this.setState(this.state); // to rerender
    }

    if (this.props.userInfo && this.props.history.location.pathname === '/') {
      this.props.history.replace("/lobby");
      this.setState(this.state); // to rerender
    }    
  }

  componentWillMount() {
    this.updateHistory()
  }

  componentDidUpdate(prevProps) {
    this.updateHistory()
  }

  render() {
    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/lobby' component={Lobby} />
        <Route path='/profile' component={Profile} />
        <Route path='/signin' component={Signin} />
      </Switch>
    )
  }
}

const connectedPage = connect(mapStateToProps, { })(App);

export default connectedPage;

此外，我在Link组件上有一个Home，它改变了浏览器导航面板中的路径，但根本不影响渲染的Home组件。

// Home.js
import React, { Component } from 'react';
import Header from 'semantic-ui-react/dist/es/elements/Header/Header';
import Button from 'semantic-ui-react/dist/es/elements/Button/Button';
import Container from 'semantic-ui-react/dist/es/elements/Container/Container';
import {connect} from "react-redux";
import { Link } from "react-router-dom";

import l10n from '../../l10n/ru';
import { userRegister } from '../../containers/actions';

const mapStateToProps = state => {
  return { isRegistering: state.isRegistering };
};

class Home extends Component {
  render() {
    return (
      <Container className="page-home">
        <Header as="h1" className="page-title">Home</Header>
        <div className="home-text">
          <p>{ l10n.HOME_TEXT }</p>
        </div>
        <div className="link-signin-container">
          <p>{l10n.HOME_SIGIN_TEXT} <Link to="/signin">{l10n.HOME_SIGIN_LINK}</Link></p>
        </div>
        <div className="home-button-container">
          <Button
            size="massive"
            icon="play"
            content={l10n.HOME_PLAY_BUTTON_TEXT}
            labelPosition="right"
            loading={this.props.isRegistering}
            onClick={this.props.userRegister}
          />
        </div>
      </Container>
    )
  }
}

const connectedPage = connect(mapStateToProps, { userRegister })(Home);

export default connectedPage;

我感觉我好像缺少一些关于使用react-router进行路由的基本信息。

Answer 1

尝试使用this.props.location而不是this.props.history.location。见this part of the docs。

至于链接，在本节中

if (!this.props.userInfo && !this.props.history.location.pathname === '/') {
  this.props.history.replace("/");
  this.setState(this.state); // to rerender
}

您告诉组件在没有用户且路由与“/”不匹配时重定向到“/”。所以链接将路由更改为'/ signin'，但随后它立即变回'/'。

Answer 2

终于找出了造成麻烦的原因

Home和App组件连接到redux商店。 React-router与商店混淆并使用withRouter功能处理。

我一改变了

const connectedPage = connect(mapStateToProps, { userRegister })(Home);到

const connectedPage = withRouter(connect(mapStateToProps, { userRegister })(Home));

和

const connectedPage = connect(mapStateToProps, { })(App);到

const connectedPage = withRouter(connect(mapStateToProps, { })(App));

它开始完美运作了

有关详细信息，请查看：https://reacttraining.com/react-router/web/guides/redux-integration