javascript – React router：组件不更新url搜索参数更改

我有一个使用URL搜索参数的React应用程序.根据搜索参数v的值,该组件应该显示不同的内容.

可能的URL可能如下所示：

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

一旦v查询参数在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搜索参数发生了变化,我希望该组件显示不同的内容.目前,URL搜索参数确实发生了变化,但组件不会再次渲染.有任何想法吗？

解决方法:

您没有提供足够的信息,因此我无法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>
}

这样,每次有param更改时,您的组件都将重新呈现.

编辑

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

标签：react-router-v4,javascript,reactjs,react-router
来源： https://codeday.me/bug/20190910/1798681.html