zoukankan      html  css  js  c++  java
  • React页面跳转传参

    来自 https://www.jianshu.com/p/02c1cf54a5df 侵删

    1. this.props.location.query:
      1)路由注册
      <Route path=' /target ' component={TargetPage}></Route>
      2)发起跳转页面
      html方式:
      <Link to={{ path : ' /target ' , query : { id : '6666' }} >XXXX</Link>
      js方式:
      this.props.history.push({ pathname : '/target' , query : { id : '6666' }})
      3)接受跳转页面
      const id=this.props.location.query.id;
      就可以接受到传递过来的参数(id)

    2. this.props.location.state:同query差不多,但是state传的参数是加密的,query传的参数是公开的,会在地址栏中显示;
      <Route path=' /target ' component={TargetPage}></Route>
      2)发起跳转页面
      html方式:
      <Link to={{ path : ' /target ' , state : { id : '6666' }} >XXXX</Link>
      js方式:
      this.props.history.push({ pathname : '/target' , state : { id : '6666' }})
      3)接受跳转页面
      const id=this.props.location.state.id;
      就可以接受到传递过来的参数(id)

    3. this.props.location.match:
      1)路由注册
      <Route path=' /target/:id ' component={TargetPage}></Route>
      2)发起跳转页面
      html方式:
      <Link to={ ' /target/ ' + ' 6666 ' } >XXXX</Link>
      js方式:
      this.props.history.push( '/target/'+'6666' )
      3)接受跳转页面
      const id=this.props.location.macth;
      就可以接受到传递过来的参数(id)

    4. this.props.location.search:
      1)路由注册
      <Switch>
      <Route path=' /target ' component={TargetPage}></Route>
      ……
      </Switch>

    2)发起跳转页面
    html方式:
    <Link to={path : ' /target?id=6666 ' } >XXXX</Link>
    js方式:
    this.props.history.push('/target?id=6666')
    3)接受跳转页面
    相当于解析地址信息
    const id= getQueryVariable(this.props.location.search, 'id');
    或者
    const id= getQueryVariable(window.location.search,‘id');
    就可以接受到传递过来的参数(id)

    function getQueryVariable(searchIn, variable) {
        if (!searchIn || !variable) {
            return null;
        }
        const query = searchIn.substring(1);
        const vars = query.split("&");
        for (let i = 0; i < vars.length; i++) {
            const pair = vars[i].split("=");
            if (pair[0] === variable) {
                return pair[1];
            }
        }
        return null;
    }


    作者:周_0717
    链接:https://www.jianshu.com/p/02c1cf54a5df
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
  • 相关阅读:
    科学美国人(Scientific American)部分段落小译
    Matlab安装使用libsvm
    【转】Matlab中特殊符号的写法
    计算机视觉资源
    AdaBoost
    AdaBoost人脸检测原理
    NLP常用开源/免费工具(转)
    搜索背后的奥秘——浅谈语义主题计算
    求数组当中子数组最大和
    求二叉树中两个节点的最低父节点
  • 原文地址:https://www.cnblogs.com/Byme/p/15697108.html
Copyright © 2011-2022 走看看