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

您好，我在使用React Router，我需要传递一些querystring参数

尝试过

<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

什么是正确的方法？

最佳答案

对于urlt参数，例如/animals和/cars，您可以使用冒号语法/:type
但是对于查询参数(例如?filter=something)，您需要解析查询字符串。

根据react-router的文档:



例如，在您的组件中，您将使用location作为父Route的 Prop (或者您可以从withRouter获取它)，然后可以使用location.search解析查询字符串，如下所示:

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

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

有关更多信息:

React Router Docs - Query Parameters

Example CodeSandbox