在React Router v4中表示URL查询

Question

我已经看到了使用不同版本的React-Router（v4之前版本）的其他一些示例，但我似乎无法找到一种方法来正确表示URL参数。

例如，如果我想从搜索结果中向朋友发送链接，它将如下所示：
https://yourwebsite.com/search?item-name=youritem

在这种情况下，我知道React-Router（v4）可以提供可选参数，但它们没有在URL中表示，因此您如何能够将该确切请求发送到服务器以获取信息。

即。我将上面的链接发送给朋友 - ＆gt;它命中服务器，然后在组件中填充数据。

Answer 1

你真的没有什么特别的事情要做，只需设置Route就好了：

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

这将设置/search路线。然后，在MySearchComponent：

中访问传递的任何查询参数

const queryParameters = this.props.location.search;

location道具通过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库。