javascript - 从react-router hash fragmen获取查询参数

我在客户端为我的应用程序使用react和react-router。 我似乎无法弄清楚如何从网址获取以下查询参数:

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

我的路线工作正常,但我不知道如何格式化路径以获取我想要的参数。 感谢任何帮助!

8个解决方案
111 votes

注意:复制/粘贴评论。 一定要喜欢原帖!

在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');`
Duncan Finney answered 2019-08-14T15:30:22Z
57 votes

旧(前V4):

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

this.props.location.query

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

更新(React Router v4 +):

React Router 4中的this.props.location.query已被删除(目前使用v4.1.1)更多关于此问题:[https://github.com/ReactTraining/react-router/issues/4410]

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

Marrs answered 2019-08-14T15:31:15Z
38 votes

上述答案在console.log(parsed.hello)中无效。以下是我为解决问题所做的工作 -

首先安装解析所需的查询字符串。

console.log(parsed.hello)

现在在路由组件中,您可以像这样访问未解析的查询字符串

console.log(parsed.hello)

您可以通过登录控制台进行交叉检查。

最后解析以访问查询参数

const queryString = require('query-string');
var parsed = queryString.parse(this.props.location.search);
console.log(parsed.param); // replace param with your own 

因此,如果查询类似于console.log(parsed.hello)

console.log(parsed.hello)将登录world

hashcode55 answered 2019-08-14T15:32:41Z
15 votes

更新2017.12.25

{name: novaline, age: 26}

网址喜欢

{name: novaline, age: 26}http://localhost:3000/demo-7/#/detail/2?sort=name

{name: novaline, age: 26}http://localhost:3000/demo-7/#/detail/2?sort=name

具有查询字符串依赖性:

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

结果:

{name: novaline, age: 26}


{name: novaline, age: 26}

网址像{name: novaline, age: 26}

{name: novaline, age: 26}

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

slideshowp2 answered 2019-08-14T15:34:04Z
5 votes

使用stringquery包:

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

希望有帮助:)

快乐的编码!

EsterlingAccime Youtuber answered 2019-08-14T15:34:47Z
4 votes

在阅读完其他答案后(首先是@ duncan-finney,然后是@Marrs),我开始寻找更改日志,解释了解决这个问题的惯用react-router 2.x方法。 组件中使用位置(查询所需)的文档实际上与实际代码相矛盾。 因此,如果你遵循他们的建议,你会得到像这样的大愤怒警告:

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

事实证明,您不能使用名为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>);
    }
});

您也可以只传递您想要在您的孩子中的位置对象的部分获得相同的好处。 它没有更改警告以更改为对象类型。 希望有所帮助。

Adam McCormick answered 2019-08-14T15:35:32Z
0 votes

使用query-string模块创建优化的生成构建时,可能会出现以下错误。

无法缩小此文件中的代码:  ./node_modules/query-string/index.js:8

为了克服这个问题,请使用名为stringquery的替代模块,它可以在运行构建时完成相同的过程而不会出现任何问题。

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);
Balasubramani M answered 2019-08-14T15:36:16Z
0 votes

简单的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);

希望这可以帮助。

Vijesh Chandera answered 2019-08-14T15:36:55Z
translate from https://stackoverflow.com:/questions/29852998/getting-query-parameters-from-react-router-hash-fragment