React-router:使用 hashHistory.push 刷新子页面内容
React-router: Refreshing the child page contents with hashHistory.push
我正在研究一个使用反应路由器的 SPA,如下所示:
<Router>
<Route path="/" component={Base}>
<IndexRoute component={Home}/>
<Route path="features/:id" component={Single} />
</Route>
</Router>
我有一个附加到 Base 的组件,该组件应该通过以下方式更新单个的内容:
hashHistory.push(`features/${val.value}`);
页面 url 更新成功,但一旦我进入子路由,对 hashHistory 的更改不会导致子状态更新。任何想法如何在此处重新加载内容?
您需要添加componentWillReceiveProps
生命周期方法。这将响应除初始render
之外的所有 的道具更改。回想一下,来自路由器的所有东西实际上只是一个道具。
// Example: the feature id changed in the url
componentWillReceiveProps(nextProps) {
if (this.props.params.id !== nextProps.params.id) {
this.setState(...);
}
}
相关文章:
- 无法't在不使用Javascript刷新页面的情况下多次将值传递给文本框
- 如何使用javascript刷新父页面并关闭子窗口
- 如何在使用JavaScript或jQuery刷新父页面后保留iframe-src
- 使用php脚本验证访问者的年龄,并在不刷新的情况下根据结果加载iframe
- 如何使用AJAX刷新表
- JQGrid使用服务器编辑后的更新数据刷新数据
- 刷新GoogleMaps tile服务器可以使用JavaScript,但不能使用GWT
- 使用angularJs中的数据库数据源刷新下拉列表
- 使用JQuery运行php并刷新页面是不起作用的
- 当ons惰性重复检测到更改时,如何使用ons旋转木马刷新列表
- 使用replaceWith同时单击按钮,而不刷新浏览器
- 自动刷新使用javascript的rails 3.2页面内容
- 使用Ajax刷新页面属性
- 使用JavaScript刷新页面时未保存的更改
- 使用Knockout-Kendo.js库刷新KendoDropDown
- 无法使用javascript插件在首次运行时加载实际图像大小(图像在刷新后加载)
- 需要帮助-用数据库中的数据替换DIV内容而不刷新(使用-jquery、hmlhttp、CI)
- Webview不能刷新使用Java代码android
- 页面区域不刷新使用jquery和setinterval
- 如何使一个javascript变量,改变后保持相同的刷新使用localStorage完整的例子