我在客户端应用程序中使用React和React-Router。我似乎无法弄清楚如何从类似以下网址的URL中获取以下查询参数：
http://xmen.database/search#/?status=APPROVED&page=1&limit=20
我的路由看起来像这样（我知道路径完全错了）：
var routes = (
<Route>
<DefaultRoute handler={SearchDisplay}/>
<Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/>
<Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/>
</Route>
);
我的路由功能正常工作，但我不确定如何格式化路径以获取所需的参数。感谢任何关于此的帮助！
注意：此评论已经复制粘贴。请确保点赞原始帖子！
我在使用 es6 和 react 0.14.6 / react-router 2.0.0-rc5 写作。我使用以下命令在我的组件中查找查询参数：
this.props.location.query
它会创建一个包含URL中所有可用查询参数的哈希值。
对于React-Router v4，请参见此答案。基本上，使用this.props.location.search获取查询字符串，然后使用query-string包或URLSearchParams进行解析：
const params = new URLSearchParams(paramsString);
const tags = params.get('tags');
上述答案在 react-router v4 中不适用。以下是我解决问题的方法 -
第一步 安装query-string，这是解析所需的。
npm install -save query-string
现在 在路由组件中，您可以像这样访问未解析的查询字符串
this.props.location.search
您可以通过在控制台中记录进行交叉检查。
最后 解析以访问查询参数
const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own
如果查询参数是?hello=world
console.log(parsed.hello)将记录world
const query = new URLSearchParams(props.location.search); console.log(query.get('hello')); （老旧浏览器需要使用polyfill）。 - Ninh Pham旧版（v4之前）：
使用es6编写，使用react 0.14.6 / react-router 2.0.0-rc5。我在组件中使用以下命令查找查询参数：
this.props.location.query
更新于2017年12月25日
"react-router-dom": "^4.2.2"
URL格式如下：
BrowserHistory: http://localhost:3000/demo-7/detail/2?sort=name
HashHistory: http://localhost:3000/demo-7/#/detail/2?sort=name
使用query-string依赖的情况：
this.id = props.match.params.id;
this.searchObj = queryString.parse(props.location.search);
this.from = props.location.state.from;
console.log(this.id, this.searchObj, this.from);
结果：
2 {sort: "name"} home
"react-router": "^2.4.1"
像这样的网址：http://localhost:8080/react-router01/1?name=novaline&age=26
const queryParams = this.props.location.query;
queryParams是一个包含查询参数的对象：{name: novaline, age: 26}
http://localhost:8090/#access_token=PGqsashgJdrZoU6hV8mWAzwlXkJZO8ImDcn&expires_in=7200&token_type=bearer（即在 # 后面没有 /），那么对于 React Router v4，你应该使用 location.hash 而不是 location.search。 - codeVerine"react-router-dom": "^5.0.0",
你不需要添加任何额外的模块，只需在具有像这样的URL地址的组件中：
http://localhost:3000/#/?authority'
您可以尝试以下简单代码：
const search =this.props.location.search;
const params = new URLSearchParams(search);
const authority = params.get('authority'); //
使用stringquery Package：
import qs from "stringquery";
const obj = qs("?status=APPROVED&page=1limit=20");
// > { limit: "10", page:"1", status:"APPROVED" }
使用 query-string 包：
import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" }
找不到包：
const convertToObject = (url) => {
const arr = url.slice(1).split(/&|=/); // remove the "?", "&" and "="
let params = {};
for(let i = 0; i < arr.length; i += 2){
const key = arr[i], value = arr[i + 1];
params[key] = value ; // build the object = { limit: "10", page:"1", status:"APPROVED" }
}
return params;
};
const uri = this.props.location.search; // "?status=APPROVED&page=1&limit=20"
const obj = convertToObject(uri);
console.log(obj); // { limit: "10", page:"1", status:"APPROVED" }
// obj.status
// obj.page
// obj.limit
Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.
const RouteComponent = React.createClass({
childContextTypes: {
loc: PropTypes.location
},
getChildContext() {
return { location: this.props.location }
}
});
const ChildComponent = React.createClass({
contextTypes: {
loc: PropTypes.location
},
render() {
console.log(this.context.loc);
return(<div>this.context.loc.query</div>);
}
});
您还可以仅传递您想要在子级中使用的位置对象的部分，从而获得相同的好处。它不会改变警告以更改为对象类型。希望这有所帮助。
简单的JavaScript解决方案：
queryStringParse = function(string) {
let parsed = {}
if(string != '') {
string = string.substring(string.indexOf('?')+1)
let p1 = string.split('&')
p1.map(function(value) {
let params = value.split('=')
parsed[params[0]] = params[1]
});
}
return parsed
}
您可以从任何地方使用以下方式进行调用：
var params = this.queryStringParse(this.props.location.search);
"react-router-dom": "6"
我可以通过useSearchParams获取页面属性的值。
let [searchParams, setSearchParams] = useSearchParams();
searchParams.get('page')
http://asd.com/report/7?page=3这样的URL时，你可以获取页面。完整的示例在这里: import React from 'react';
import { useSearchParams} from "react-router-dom";
const Detail = (props) => {
const [searchParams, setSearchParams] = useSearchParams();
console.log('page from search',searchParams.get('page')) // 1
return (
<div></div>
);
};
export default Detail;
为了克服这个问题，请使用另一个称为stringquery的替代模块，在运行构建时不会出现任何问题，可以很好地执行相同的过程。无法缩小来自此文件的代码： ./node_modules/query-string/index.js:8
import querySearch from "stringquery";
var query = querySearch(this.props.location.search);
willTransitionTo钩子。它接收查询字符串参数。https://github.com/rackt/react-router/commit/2a75f3ee9ea3f6eccd1c18e84747747bb72ebf38 - Cory Danielson