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

Question

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

我的路线工作正常，但我只是不确定如何格式化路径以获得我想要的参数。感谢对此的任何帮助！

Answer 1

注意：从评论中复制/粘贴。原创一定要点赞post!

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

this.props.location.query

它在 url.

中创建所有可用查询参数的哈希

更新：

对于 React-Router v4，请参阅 . Basically, use this.props.location.search to get the query string and parse with the query-string package or URLSearchParams：

const params = new URLSearchParams(paramsString); 
const tags = params.get('tags');

Answer 2

旧版（v4 之前）：

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

this.props.location.query

它在 url.

中创建所有可用查询参数的散列

更新（React Router v4+）：

this.props.location.query 在 React Router 4 中已被删除（目前使用 v4.1.1）更多关于这里的问题：https://github.com/ReactTraining/react-router/issues/4410

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

Answer 3

阅读其他答案后（先是@duncan-finney，然后是@Marrs）我开始寻找解释惯用 react-router 2.x 解决方法的更改日志这个。组件中的 documentation on using location （您需要查询）实际上与实际代码相矛盾。所以如果你听从他们的建议，你会收到这样的愤怒警告：

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

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

Answer 4

更新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"

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

const queryParams = this.props.location.query;

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

Answer 5

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

Answer 6

With stringquery Package:

import qs from "stringquery";

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

With query-string Package:

import qs from "query-string";
const obj = qs.parse(this.props.location.search);
console.log(obj.param); // { limit: "10", page:"1", status:"APPROVED" }

No Package:

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

希望对您有所帮助:)

编码愉快！

Answer 7

使用 query-string 模块创建优化的生产版本时，您可能会遇到以下错误。

Failed to minify the code from this file: ./node_modules/query-string/index.js:8

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

import querySearch from "stringquery";

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

Answer 8

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

希望对您有所帮助。

Answer 9

"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 哈希片段中获取查询参数

Getting query parameters from react-router hash fragment

javascript

client-side

client-side-scripting

reactjs

react-router

更新：