我有一个使用 URL 搜索参数
的 React
应用程序。根据搜索参数 v
的值,组件应该显示不同的内容。
可能的 URL
可能如下所示:
http://localhost:3000/hello?v=12345
一旦URL
中的v查询参数
发生变化,我希望更新我的组件。
http://localhost:3000/hello?v=6789
我在我的应用程序组件中使用 react-router
来根据路由显示不同的组件。 App
组件封装在 BrowserRouter
组件中。
render() {
return (
<Switch>
<Route path="/hello" component={Hello}></Route>
<Route path="/" component={Home}></Route>
</Switch>
);
}
如果用户单击某些内容并且 URL 搜索参数 v
发生变化,我希望组件显示不同的内容。目前,URL 搜索参数
确实发生了变化,但组件不会再次呈现。有什么想法吗?
最佳答案
正如 @forJ 正确指出的那样,主要思想是在 URL
参数更改后使组件重新渲染。我是这样实现的:
render() {
return (
<Switch>
<Route path="/hello" render={() => (<Hello key={this.props.location.key}/>)}></Route>
<Route path="/" component={Home}></Route>
</Switch>
);
}
每次 URL
更改时,this.props.location.key
都会更改(如果查询参数更改)。因此,如果您将其作为 props 传递给组件,则即使 base URL
(URL
没有 URL
参数)没有改变。
我还必须使用 withRouter
高阶组件才能使其工作。
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Hello));
关于javascript - react 路由器: component not updating on url search param change,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50667609/