React Router:组件未在URL搜索参数更改时更新

正如@forj正确指出的,主要思想是在 URL 参数改变。我是这样做到的:

render() {
  return (
    <Switch>
      <Route path="/hello" render={() => (<Hello key={this.props.location.key}/>)}></Route>
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

this.props.location.key 每次 统一资源定位地址 更改(如果查询参数更改)。因此,如果将其作为道具传递给组件,则组件将重新呈现 统一资源定位地址 参数更改,即使 base URL (the 统一资源定位地址 没有 统一资源定位地址 params)没有改变。

我还得用 withRouter 使其工作的高阶组件。

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Hello));

你没有提供足够的信息,所以我不能百分之百确定你哪里出错了,但我现在可以看到你的代码中有一个问题。首先,你必须让路由器知道你将使用参数。例如下面的代码

render() {
  return (
    <Switch>
      <Route path="/hello/:yourParam" component={Hello}></Route> // you need the colon here
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

上面将告诉该参数调用的路由 yourParam 可从 URL

然后必须在组件中访问它并以某种方式将其放入render函数(使用它从数据库中检索数据以呈现数据,只需直接呈现参数,等等)。

例如下面

render(){
    <div>
        {this.props.match.params.yourParam}
    </div>
}

这样,组件将在每次参数更改时重新呈现。

编辑

因为您想使用查询而不是参数,所以必须通过执行以下操作来检索它。 this.props.match.query.v . 仍然需要确保根据查询更改呈现变量