React路由器:组件未在url搜索参数更改时更新
我有一个使用URL search params的React应用程序。根据search parameter v的值，组件应该显示不同的内容。
可能的URL可能如下所示：
http://localhost:3000/hello?v=12345一旦URL中的v query parameter发生变化，我希望更新我的组件。
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 search param v发生了变化，我希望该组件显示不同的内容。目前，URL search param确实发生了变化，但组件不会再次呈现。有什么想法吗？
回答 3
Stack Overflow用户
发布于 2018-06-04 15:35:26
正如@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都会更改(如果查询参数更改，也会更改)。因此，如果您将其作为道具传递给组件，那么组件将在URL参数更改时重新呈现，即使base URL (不带URL参数的URL )没有更改。
我还必须使用withRouter高阶组件才能使其工作。
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Hello));Stack Overflow用户
发布于 2018-06-04 08:32:01
你没有提供足够的信息，所以我不能100%确定你哪里出错了，但我现在可以在你的代码中看到一个问题。首先，您必须让路由器知道您将使用参数。举个例子，下面的代码
render() {
return (
<Switch>
<Route path="/hello/:yourParam" component={Hello}></Route> // you need the colon here
<Route path="/" component={Home}></Route>
</Switch>
);
}上面的代码将告诉路由可以从URL访问名为yourParam的参数
然后必须在组件中访问它，并以某种方式将其放入render函数(使用它从数据库中检索数据以呈现数据，直接呈现参数，等等)。
例如下面的例子
render(){
<div>
{this.props.match.params.yourParam}
</div>
}这样，您的组件将在每次参数更改时重新呈现。
编辑
由于您希望使用查询而不是参数，因此必须通过以下方式检索它。this.props.match.query.v。您仍然必须确保根据查询更改呈现该变量
Stack Overflow用户
发布于 2020-12-15 14:05:55
如果使用useEffect钩子，请确保使用[props.match.params]而不是空数组[]
useEffect(() => {
(async () => {
// Fetch your data
})();
}, [props.match.params]) // <-- By this it will get called when URL changes当然，对于类组件this.props.match.params
https://stackoverflow.com/questions/50667609
复制相似问题