从反应路由器散列片段获取查询参数

我正在客户端为我的应用程序使用反应和反应路由器。我似乎不知道如何从 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>
);

我的路径工作良好，但我只是不确定如何格式化路径，以获得我想要的参数。感谢你的帮助！

210699 次浏览
小开
最佳答案

注意: 复制/粘贴自评论。请确保喜欢原帖！

在 es6中编写并使用 response 0.14.6/response-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');
小开

旧版(前4版) :

在 es6中编写并使用 response 0.14.6/response-router 2.0.0-rc5。我使用这个命令查找组件中的查询参数:

this.props.location.query

它在 url 中创建所有可用查询参数的哈希值。

更新(反应路由器 v4 +) :

React 路由器4中的 this.pros.location.query 已被删除(目前使用的是 v4.1.1)

看起来他们希望您使用自己的方法来解析查询参数，目前使用这个库来填补这个空白: https://github.com/sindresorhus/query-string

小开

在阅读了其他答案后(先是@duncan-finney，然后是@Marrs) ，我开始寻找解释惯用的反应路由器2.x 解决这个问题的方法的变更日志。组件中的 关于使用位置的文件(用于查询)实际上与实际代码相矛盾。因此，如果你听从他们的建议，你会得到如下愤怒的警告:

Warning: [react-router] `context.location` is deprecated, please use a route component's `props.location` instead.

结果表明，不能有一个名为 location 的上下文属性使用 location 类型。但是可以使用名为 loc 的上下文属性，该属性使用位置类型。因此，解决方案是对它们的来源进行如下小小的修改:

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>);
}
});

您也可以只传递位置对象的部分，您希望在您的孩子得到同样的好处。它没有更改更改为对象类型的警告。希望能帮上忙。

小开

更新日期: 2017.12.25

"react-router-dom": "^4.2.2"

网址喜欢

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"

Url 喜欢 http://localhost:8080/react-router01/1?name=novaline&age=26

const queryParams = this.props.location.query;

QueryParams 是一个包含查询参数的对象: {name: novaline, age: 26}

小开

上面的答案在 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

小开

使用字符串查询软件包:

import qs from "stringquery";


const obj = qs("?status=APPROVED&page=1limit=20");
// > { limit: "10", page:"1", status:"APPROVED" }

使用查询字符串包:

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

希望这能有所帮助:)

编程愉快！

小开

在使用 Query-string 查询字符串模块创建优化的生产版本时，可能会出现以下错误。

未能缩小此文件中的代码: ./node _ module/query-string/index.js: 8

为了克服这个问题，请使用名为 字符串查询的替代模块，它在运行构建时可以很好地完成相同的过程，没有任何问题。

import querySearch from "stringquery";


var query = querySearch(this.props.location.search);
小开

简单的 js 解决方案:

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": "^5.0.0",

您不需要添加任何其他模块，只需在组件中添加如下 URL 地址:

Http://localhost:3000/#/?authority

你可以尝试下面的简单代码:

    const search =this.props.location.search;
const params = new URLSearchParams(search);
const authority = params.get('authority'); //
小开 
"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;

反应堆


提交答案