在React Router v4中表示URL查询

Question

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

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

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

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

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中的任何其他querystring ，甚至可以使用浏览器自己的URLSearchParams ：

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

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