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

JavaScript

猿路易

2020-03-12

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

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

第1000篇《从react-router哈希片段获取查询参数》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答

AHarry 2020.03.12

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

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

为了克服这个问题，请使用另一个名为stringquery的模块，该模块在运行构建时可以很好地完成相同的过程。

import querySearch from "stringquery";

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

小胖蛋蛋 2020.03.12

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

具有查询字符串依赖性：

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}

猴子飞云 2020.03.12

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

Harry乐Harry 2020.03.12

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