反应路由器：组件未在 url 搜索参数更改时更新答案

【问题标题】：React router: component not updating on url search param change反应路由器：组件未在 url 搜索参数更改时更新
【发布时间】：2018-11-13 00:33:34
【问题描述】：

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

可能的URL 可能如下所示：

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

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

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

我在我的 App 组件中使用 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 确实发生了变化，但组件不会再次呈现。有什么想法吗？

【问题讨论】：

标签： javascript reactjs react-router react-router-v4

【解决方案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 传递给组件，那么组件会在 URL 参数上重新渲染，即使 base URL（没有 URL 参数的 URL）没有改变。

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

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

【讨论】：

如果你使用 redux，withRouter 在这里很关键。
使用“key”将导致组件完全卸载和重新安装，因此请考虑负面的性能影响。 medium.com/@albertogasparin/…

【解决方案2】：

您没有提供足够的信息，因此我无法 100% 确定您哪里出错了，但我现在可以在您的代码中看到 1 个问题。首先，您必须让路由器知道您将使用参数。所以例如下面的代码

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

上面会告诉路由yourParam的参数可以从URL访问

然后必须在您的组件中访问它并以某种方式放入渲染函数（使用它从数据库中检索数据以渲染数据，直接渲染参数等）。

例如下面

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

这样，您的组件将在每次参数更改时重新渲染。

编辑

由于您想使用查询而不是参数，因此您必须通过 go 来检索它。 this.props.match.query.v。您仍然必须确保根据查询更改呈现变量

【讨论】：

如果我执行 '/hello/:yourParam'，那么我的 url 看起来像 localhost:3000/hello/123，但我希望它使用 URL 搜索参数，以便 URL 看起来像 localhost:3000 /hello?v=123
@slashburn。对不起这是我的错。然后你只需要检查你是否通过this.props.match.query.v从类中检索查询，并确保渲染函数在更改该值时重新运行
啊，我明白了。感谢@forJ 为我指明了正确的方向

【解决方案3】：

如果您使用 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

【讨论】：