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

Question

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

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警告:[react-router]位置"/ results？query1 = 1&query2 = 2&query3 = 3"与任何路由都不匹配

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

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

Answer 1

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

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

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

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

编辑: React Router v3.xx的情况仍然如此.

Answer 2

如果你正在使用React Router> = v4 location.query不再可用.您可以插入外部库(如https://www.npmjs.com/package/query-string),或使用以下内容:

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

(请记住,URLSearchParams()Internet Explorer不支持)