javascript - React-router:使用 hashHistory.push 刷新子页面内容

Question

我正在开发一个像这样使用 react 路由器的 SPA:

<Router>
    <Route path="/" component={Base}>
    <IndexRoute component={Home}/>
    <Route path="features/:id" component={Single} />
    </Route>
</Router>

我有一个附加到 Base 的组件，它应该通过以下方式更新 Single 的内容:

hashHistory.push(`features/${val.value}`);

页面 url 更新成功，但是一旦我进入子路由，对 hashHistory 的更改不会导致子状态更新。我有什么想法可以在这里重新加载内容吗？

Answer 1

您需要添加 componentWillReceiveProps lifecycle method .这将响应所有 render 的 prop 更改，除了初始的。回想一下，来自路由器的一切实际上都只是一个 Prop 。

// Example: the feature id changed in the url
componentWillReceiveProps(nextProps) {
  if (this.props.params.id !== nextProps.params.id) {
    this.setState(...);
  }
}