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

Question

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

可能的 URL 可能如下所示：

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

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

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

Answer 1

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

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

以上将告诉路由可以从 URL

访问名为 yourParam 的参数

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

例如下面

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

这样，每次参数更改时您的组件都会重新呈现。

编辑

既然你想使用查询而不是参数，你就必须去检索它。 this.props.match.query.v。您仍然必须确保根据查询更改呈现变量

Answer 2

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

Answer 3

如果您使用 useEffect 钩子，请确保使用 [props.match.params] 而不是空数组 []

useEffect(() => {

        (async () => {
            // Fetch your data
        })();
    }, [props.match.params]) // <-- By this it will get called when URL changes

当然 class 个组件 this.props.match.params

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

React router: component not updating on url search param change

javascript

reactjs

react-router

react-router-v4