如何在 React Router 中解析查询字符串

Question

您好，我使用的是 React 路由器，我需要传递一些查询字符串参数

试过

<Route path="/result/:type?/?filter=:filter?" exact strict component={Result}/>

我期待着捕捉像这样的网址

/result
/result/animals
/result/cars
/result/animals?filter=cats,dogs
/result/cars?filter=sedan,truck

正确的做法是什么？

原文由 handsome 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 _url 参数_，例如 /animals 和 /cars ，您可以使用冒号语法 /:type

但是对于 _查询参数_，比如 ?filter=something ，你需要解析查询字符串。

根据反应路由器文档：

React Router 对您如何解析 URL 查询字符串没有任何意见。一些应用程序使用简单的 key=value 查询字符串，但其他应用程序在查询字符串中嵌入数组和对象。因此，由您自己解析搜索字符串。

在支持 URL API 的 现代浏览器中，您可以从 URLSearchParams 实例化一个 location.search 对象并使用它。

在 不支持 URL API 的浏览器中（阅读：IE）， 您可以使用第 3 方库，例如 query-string 。

例如，在您的组件中，您将拥有 location 作为来自父级的道具 Route （或者您可以从 withRouter 获取），然后您可以- 使用 location.search 像这样解析查询字符串：

 function Parent({location}) {
  let params = new URLSearchParams(location.search);

  return <Child name={params.get("filter")} />;
}

欲了解更多信息：

• React Router 文档 - 查询参数

• 示例代码沙箱

原文由 Moe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

旧版本的 React Router 提供了这个功能，但最终他们认为处理跨浏览器的变化太麻烦了。

从当前版本 (v4) 开始，您需要使用一个库，例如 query-string 。

要考虑的另一种选择：如果您知道目标浏览器支持 URLSearchParams API，则可以改用它。

安装包：

yarn add query-string

用法：

 import queryString from 'query-string'

...

componentDidMount() {
  const values = queryString.parse(this.props.location.search)
}

原文由 Peter 发布，翻译遵循 CC BY-SA 4.0 许可协议