Rep路由器:未更新url搜索参数更改的组件怎么解决?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (25)

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

URL可能如下所示:

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

我想要更新组件。

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

我正在使用react-router在我的应用程序组件中显示取决于路线的不同组件。该组件被封装到一个BrowserRouter组件中。

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

如果用户点击某些内容和URL search param v更改,我希望该组件显示不同的内容。有任何想法吗?

提问于
用户回答回答于

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

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

然后它必须在你的组件中被访问,并以某种方式放到渲染函数中。

例如下面

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

扫码关注云+社区

领取腾讯云代金券