javascript - react 路由器: component not updating on url search param change

Question

我有一个使用 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 搜索参数确实发生了变化，但组件不会再次呈现。有什么想法吗？

Answer 1

正如 @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));