Question

这是一个带有完整代码的回购展示了问题 - 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>
  );
};

我们有App支持商店和路由器，Routing定义路由并connect编辑状态，Main组件显示页面和页面链接。

当您点击链接时，一切正常。但是，当您按下浏览器的后退按钮时，第一次网址会更改但路由参数不会更改，因为newProps.location.pathname是newProps.history.location.pathname后面的一个历史记录步骤。

我挖得足够深，找出导致它的原因，但不是原因：我们connect上的Routing。删除后，后退按钮正常工作。这不是解决方案，因为我需要那里的状态。

所以：

如何使后退/前进按钮工作而不删除我的状态映射？
为什么是这样的？

Answer 1

答案是将其包装在withRouter中。见https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/redux.md#blocked-updates

当路由器收到状态

1 个答案: