react-router中的查询字符串

IT技术 reactjs query-string react-router
2021-04-29 16:51:45

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

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 容器中，我希望能够访问 do query1、query2 和 query3 参数。

我一直无法让它发挥作用。我收到以下错误：

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

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

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

2个回答

如果您使用的是 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 >= v4location.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 不支持）

其它你可能感兴趣的问题
上一篇随着打印的进行，Ender 3 喷嘴越来越靠近前一层 下一篇react，未捕获的 ReferenceError：ReactDOM 未定义