zoukankan      html  css  js  c++  java
  • react 路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式。分别为通过通配符传参、query传参和state传参。

    ps:进入正题前,先说明一下,以下的所有内容都是在react-router V4的版本下。

    1.params

    Route定义方式:

    <Route path='/path/:name' component={Path}/>

    Link组件:

    HTML方式

    <Link to="/path/通过通配符传参">通配符</Link>

    JS方式

    this.props.history.push({
      pathname:'/shopCarDetail',
      params:{
        name:'jack'
      }
    });

    参数获取:

    this.props.location.params.name // jack

    2.query

    Route定义方式:

    <Route path='/query' component={Query}/>

    Link组件:

    HTML方式

    var query = {
      pathname: '/query',
      query: {day: 'Friday'}
    }
    
    <Link to={query}>query</Link>

    JS方式

    this.props.history.push({
      pathname:'/query',
      query:{
        day:'Friday'
      }
    });

    参数获取:

    this.props.location.query.day // Friday

    优点:优雅,可传对象

    缺点:刷新页面,参数丢失

    3.state

    Route定义方式:

    <Route path='/state' component={State}/>

    Link组件:

    HTML方式

    var state = {
      pathname: '/state',
      state: {name: 'sunny'}
    }
    <Link to={state}>state</Link>

    JS方式

    this.props.history.push({
      pathname:'/state',
      state:{
        name:'sunny'
      }
    });

    参数获取:

    this.props.location.state.name // sunny

    优点:优雅,可传对象

    缺点:刷新页面,参数丢失

  • 相关阅读:
    Arrays.fill方法的陷阱
    彻底弄懂最短路径问题
    《c++primer》疑惑记录
    C++ 隐含的this 指针
    c++ 内存分配
    抽象 与 封装 区别
    iconv 文件编码转换
    python中文分词工具——结巴分词
    词形变换和词干提取工具(英文)
    python 绘图工具 matplotlib 入门
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9261630.html
Copyright © 2011-2022 走看看