React 路由器：组件未在 url 搜索参数更改时更新

Question

我有一个React使用URL search params. 根据 的值search parameter v，组件应该显示不同的内容。

一个可能的URL可能是这样的：

http://localhost:3000/hello?v=12345

一旦 中的v query parameter更改URL，我希望我的组件更新。

http://localhost:3000/hello?v=6789

我react-router在我的 App 组件中使用 using来根据路由显示不同的组件。该App部件被包裹成一个BrowserRouter组件。

render() {
  return (
    <Switch>
      <Route path="/hello" component={Hello}></Route>
      <Route path="/" component={Home}></Route>
    </Switch>
  );
}

如果用户单击某些内容并进行URL search param v更改，我希望组件显示不同的内容。目前，URL search param确实发生了变化，但组件不会再次呈现。有任何想法吗？

Answer 1

正如@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每次更改时都会URL更改（如果查询参数更改）。因此，如果您将它作为 props 传递给组件，则组件会在URLparam 更改时重新呈现，即使base URL（URL没有URLparams 的）没有更改。

我还必须使用withRouter高阶组件来使其工作。

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