从react-router哈希片段获取查询参数


112

我在客户端上为我的应用程序使用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>
);

我的路线工作正常,但我不确定如何格式化路径以获取所需的参数。感谢任何帮助!


我环顾四周,仅能通过以下方式找到提取组件中查询字符串参数的示例,例如getCurrentQuery
Cory Danielson


您可以willTransitionTo在处理程序上使用钩子。它接收查询字符串参数。github.com/rackt/react-router/commit/...
科里丹尼尔森

同样在此处获取有关过渡挂钩的文档:github.com/rackt/react-router/blob/master/docs/api/components / ...一旦弄清楚了,就应该用解决方案回答这个问题。我相信您不会是遇到这种情况的最后一个人。
科里·丹尼尔森

Answers:


133

注意:复制/粘贴评论。确保喜欢原始帖子!

编写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');

2
从React-router 1.x到2.x,它不再是////
Peter Aron Zentai'1

7
根据彼得的
说法

2
query似乎在React Router 4中消失了。github.com/ReactTraining/react
Sung Cho

57

OLD(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


2
我已经使用React 0.14.8进行了测试,您的答案无法正常显示:error TypeError: Cannot read property 'location' of undefined::|
托马斯·摩德尼斯

3
嘿@ThomasModeneis,这是您的路由器渲染的最顶层的父组件吗?还是子组件?如果我没记错的话,您必须将this.props.location.query从路由器渲染的父组件传递到子组件中,这是我唯一想到的事情。
Marrs

55

以上答案在中无效react-router v4。这是我为解决问题所做的工作-

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

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


16
或不带lib :(const query = new URLSearchParams(props.location.search); console.log(query.get('hello'));较旧的浏览器需要polyfill)。
Ninh Pham

在我构建应用程序时应该可以使用,对吗?
Walter

16

更新2017.12.25

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

网址喜欢

BrowserHistoryhttp://localhost:3000/demo-7/detail/2?sort=name

HashHistoryhttp://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);

结果:

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/之后#),那么对于location.hashlocation.search
React

10

使用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

希望有帮助:)

编码愉快!



4

在阅读了其他答案之后(首先由@ duncan-finney然后由@Marrs进行),我着手查找更改日志,该更改日志解释了解决此问题的惯用react-router 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>);
    }
});

您还可以仅传递希望孩子获得相同收益的位置对象的各个部分。它没有更改警告以更改为对象类型。希望有帮助。


1

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

希望这可以帮助。


0

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

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

为了克服这个问题,请使用名为stringquery的替代模块,该模块在运行构建时可以很好地完成相同的过程而没有任何问题。

import querySearch from "stringquery";

var query = querySearch(this.props.location.search);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.