React-router：使用 hashHistory.push 刷新子页面内容答案

【问题标题】：React-router: Refreshing the child page contents with hashHistory.pushReact-router：使用 hashHistory.push 刷新子页面内容
【发布时间】：2016-08-23 19:44:23
【问题描述】：

我正在开发一个使用 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 的更改不会导致子状态更新。有什么想法可以在这里重新加载内容吗？

【问题讨论】：

标签： javascript reactjs react-router

【解决方案1】：

您需要添加componentWillReceiveProps lifecycle method。这将响应所有 renders 的 prop 更改，除了最初的。回想一下，来自路由器的所有东西实际上只是一个道具。

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

【讨论】：