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

无法正确设置react-router 4渲染路线

2 个答案: