Question

我正在开发一个使用反应路由器的SPA，如下所示：

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

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

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

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

Answer 1

您需要添加componentWillReceiveProps lifecycle method。这将响应除初始值之外的所有render的道具更改。回想一下，来自路由器的所有东西都只是一个道具。

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

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

1 个答案: