react-router中的查询字符串
我正在尝试使用查询字符串设置路由路径。某物类似于：
www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3然后，我会像这样转换到"Results“组件：
<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-路由器位置"/results?query1=1&query2=2&query3=3“与任何路由都不匹配
我尝试遵循以下指南中的步骤：(小节:查询字符串参数怎么办？) https://www.themarketingtechnologist.co/react-router-an-introduction/
我能在这里得到一些帮助吗？
回答 2
Stack Overflow用户
发布于 2016-03-20 10:46:38
如果您使用的是React Router v2.xx，则可以通过传递给路由组件的location.query对象访问查询参数。
换句话说，您可以修改您的路由，使其如下所示：
<Route path="results" component={SearchResults} />然后在SearchResults组件中，使用this.props.location.query.query1 (类似于query2和query3)访问查询参数值。
EDIT:这仍然是React Router v3.xx的情况。
Stack Overflow用户
发布于 2017-05-08 23:09:58
如果您正在使用React路由器，>= 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(只需记住，Internet Explorer不支持URLSearchParams() )
https://stackoverflow.com/questions/36109590
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号