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

    优点:优雅,可传对象

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

  • 相关阅读:
    C# 使用IComparer自定义List类的排序方案
    ubuntu的vim模式
    linux系统目录结构与层级命令使用
    GitHub托管项目
    应用TortoiseGit为github账号添加SSH keys
    PHP中利用PHPMailer配合QQ邮箱实现发邮件
    QQ互联 网站应用接入
    dedecms 中变量函数
    WebSocket 协议
    前端组件库
  • 原文地址:https://www.cnblogs.com/crazycode2/p/9261630.html
Copyright © 2011-2022 走看看