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

8 回答

• 57

  使用query-string模块时，在创建优化的 生产环境 构建时可能会出现以下错误 .

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

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

  import querySearch from "stringquery";
  
  var query = querySearch(this.props.location.search);
  

  回复于 2024-04-29T01:38:29+08:00
• 4

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

  希望这可以帮助 .

  回复于 2024-04-29T01:38:29+08:00
• 3

  update 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"

  网址如 http://localhost:8080/react-router01/1?name=novaline&age=26

  const queryParams = this.props.location.query;

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

  回复于 2024-04-29T01:38:29+08:00
• 0

  旧的（前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

  回复于 2024-04-29T01:38:29+08:00
• 0

  使用stringquery包：

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

  使用query-string包：

  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
  

  希望有所帮助:)

  快乐的编码！

  回复于 2024-04-29T01:38:29+08:00
• 98

  以上答案不适用于 react-router v4 . 以下是我为解决问题所做的工作 -

  First 安装解析所需的query-string .

  npm install -save query-string

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

  this.props.location.search

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

  Finally 解析以访问查询参数

  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

  回复于 2024-04-29T01:38:29+08:00
• 35

  注意：复制/粘贴评论 . 一定要喜欢原帖！

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

  this.props.location.query
  

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

  更新：

  对于React-Router v4，请参阅this answer . 基本上，使用 this.props.location.search 获取查询字符串，并使用 query-string 包解析或URLSearchParams -

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

  回复于 2024-04-29T01:38:29+08:00
• 15

  在阅读了其他答案后（首先是@ 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>);
      }
  });
  

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

  回复于 2024-04-29T01:38:29+08:00