反应路由器中的查询字符串 [英] Querystring in react-router

问题描述

我正在尝试使用查询字符串设置路由路径.类似于以下内容:

I am trying to set a Route path with a query string. Something in the lines of:

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

我会像这样过渡到结果"组件:

I would than transition to the "Results" component like so:

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

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

In the SearchResults container I would like to be able to have access do query1, query2 and query3 params.

我一直无法让它工作.我收到以下错误:

I have not been able to make it work. I get the following error:

bundle.js:22627 警告:[react-router] 位置/results?query1=1&query2=2&query3=3"没有匹配任何路由

bundle.js:22627 Warning: [react-router] Location "/results?query1=1&query2=2&query3=3" did not match any routes

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

I tried following the steps in the following guide: (Section: What about query string parameters?) https://www.themarketingtechnologist.co/react-router-an-introduction/

我可以在这里寻求帮助吗?

Can I get some help here?

推荐答案

如果你使用的是 React Router v2.xx，你可以通过传入的 location.query 对象访问查询参数路由组件.

If you are using React Router v2.xx, you can access the query parameters via the location.query object passed in to your Route component.

换句话说，您可以重新设计您的路线，如下所示:

In other words, you could rework your route to look like the following:

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

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

And then inside your SearchResults component, use this.props.location.query.query1 (similar for query2 and query3) to access the query parameter values.

React Router v3.xx 仍然如此.

This is still the case for React Router v3.xx.

这篇关于反应路由器中的查询字符串的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！