javascript - 在 React Router v4 中表示 URL 查询

Question

我看过其他一些使用不同版本的 React-Router(v4 之前)的示例，但我似乎找不到正确表示 URL 参数的方法。

例如，如果我想从搜索结果中向 friend 发送链接，它看起来像:
https://yourwebsite.com/search?item-name=youritem

在这种情况下，我知道 React-Router(v4) 可以提供可选参数，但它们未在 URL 中表示，因此您如何才能将准确的请求发送到服务器以获取信息。

即我将上面的链接发送给 friend -> 它到达服务器，然后数据被填充到组件中。

Answer 1

真的没有什么特别的事情要做，只需像这样设置一个Route:

<Route path="/search" component={MySearchComponent} />

这将设置/search 路由。然后，要在您的 MySearchComponent 中访问传递的任何查询参数:

const queryParameters = this.props.location.search;

location prop 通过 React Router 传递给组件。它包含整个查询字符串。所以如果我导航到:

https://myWebsite.com/search?foo=bar&baz=buzz

那么 this.props.location.search 将是:

'?foo=bar&baz=buzz'

这类似于 Location.search在现代浏览器上。接下来，您可以使用查询字符串解析器库，如内置 querystring或 NPM 中的任何其他人，甚至是浏览器自己的 URLSearchParams :

const params = new URLSearchParams(queryParameters);
const foo = params.get('foo'); //baz
const baz = params.get('baz'); //buzz

请注意，Internet Explorer 不支持此功能。我建议改用 NPM 库。