Reactjs react路由器中的查询串

我正在尝试使用查询字符串设置路由路径。类似于：

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

我不想这样过渡到“结果”部分：

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

在SearchResults容器中，我希望能够访问query1、query2和query3参数

我没能让它工作。我得到以下错误：

bundle.js:22627警告：[反应路由器]位置 “/results？query1=1&query2=2&query3=3”与任何路由都不匹配

我尝试了以下指南中的步骤：（部分：查询字符串参数如何？）

---

我可以在这里获得一些帮助吗？

如果您使用的是React Router v2.xx，您可以通过传递到路由组件的

位置来访问查询参数

换句话说，您可以重新设计路线，使其看起来如下所示：

<Route path="results" component={SearchResults} />



然后在
SearchResults
组件中，使用
this.props.location.query.query1
（类似于
query2
和
query3
）访问查询参数值

编辑：对于React Router v3.xx，情况仍然如此。
如果您使用的是React Router>=v4
位置。查询
不再可用。您可以插入外部库（如），或使用类似以下内容：

const search = props.location.search; // could be '?foo=bar'
const params = new URLSearchParams(search);
const foo = params.get('foo'); // bar

（请记住，Internet Explorer不支持这一点）
感谢您提供有关URLSearchParams（）和IES的信息。另外，请注意，如果您使用的是
create react app
，则必须使用查询字符串v5-
npm install query-string@5