react-router中的查询字符串

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试使用查询字符串设置路由路径。符合以下条件的东西：

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”与任何路由都不匹配

我尝试遵循以下指南中的步骤：（部分：查询字符串参数如何？） https://www.themarketingtechnologist.co/react-

router-an-introduction/

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

回答：

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

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

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

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

React Router v3.xx仍然是这种情况。

以上是 react-router中的查询字符串 的全部内容， 来源链接： utcz.com/qa/415355.html

回到顶部