反应路由器中的查询字符串

Question

我正在尝试使用查询字符串设置Route路径。有些东西：

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

我宁愿过渡到＆＃34;结果＆＃34;像这样的组件：

<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警告：[react-router]位置   ＆＃34; /结果QUERY1 = 1＆安培; QUERY2 = 2及QUERY3 = 3＆＃34;没有匹配任何路线

我尝试按照以下指南中的步骤操作:(部分：查询字符串参数怎么样？） https://www.themarketingtechnologist.co/react-router-an-introduction/

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

Answer 1

如果您使用的是React Router v2.xx，则可以通过传递给Route组件的location.query对象访问查询参数。

换句话说，您可以将路线修改为如下所示：

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

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

编辑： React Router v3.xx仍然如此。