当路由器收到状态时，React 路由器 redux 滞后一个历史步骤

debugcn 发表于 Dev

米修尔

这是一个带有完整代码的 repo 演示了这个问题 - https://github.com/Misiur/ReactRouterReduxBug

看看这个代码

class Main extends Component {
  componentWillReceiveProps(nextProps) {
    if (this.props.match.params.page !== nextProps.match.params.page) {
      console.log(`Page changed to ${nextProps.match.params.page}`);
    } else {
      console.log('Page did not change');
      console.log(newProps.location.pathname);
      console.log(newProps.history.location.pathname);
    }
  }

  render() {
    const page = this.props.match.params.page;

    return (
      <div>
        <strong>Current page is {page}</strong><br />
        <Link to="/1">Page 1</Link><br />
        <Link to="/2">Page 2</Link><br />
        <Link to="/3">Page 3</Link><br />
        <Link to="/4">Page 4</Link><br />
        <Link to="/5">Page 5</Link>
      </div>
    );
  }
}

const RawRouting = (props) => {
  // Do something with this.props.state
  // console.log(props);

  return (
    <Route path="/:page(\d+)?" component={Main} />
  );
};

const Routing = connect(state => ({ state }))(RawRouting);

const App = () => {
  return (
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <Routing />
      </ConnectedRouter>
    </Provider>
  );
};

我们有Appwhich 脚手架 store 和 router，Routing它定义了路由和connect状态，以及Main显示页面和页面链接的组件。

当您单击链接时，一切正常。但是，当您按下浏览器的后退按钮时，第一次 url 更改但路由参数没有更改，因为newProps.location.pathname落后了一个历史步骤newProps.history.location.pathname。

我已经深入挖掘以找出导致它的原因，但没有找到原因：connect在我们的Routing. 当它被移除时，后退按钮正常工作。这不是解决方案，因为我需要那里的状态。

所以：