zoukankan      html  css  js  c++  java
  • react的路由以及传值方法

    1.下载路由

    npm i router-react-dom --S

    2.引入

    import {Link,Route} from 'react-router-dom'

    3.使用Link标签

     <Link to='/'>Home</Link>

    4.路由展示

    exact 精准匹配路由

    component={Home} 指定js文件
    path={"/"} url路由地址
    <Route path={"/"} exact component={Home}></Route>

    传值

    1.params的路由传值

    配置路由

    const id = 123;

    配置直接在路由拼接变量id

    <Link to={'/about/'+id+'/'+name}>About</Link>

    在展示区域添加/:id

    <Route path={"/about/:id"} component={about}></Route>

    在展示的js里使用

    this.props.match.params.id

    接收

    params特点

    1.需要路由配置

    2.刷新网页值还存在

    3.如果传参数过多,url网址太长

    2.query传值不需要配置路由

    在路由上添加

    pathname:'/mine'路由地址
    query:obj对象形式传值
    <Link to={{pathname:'/mine',query:obj}}>Mine</Link>

     在子展示页面使用

    this.props.location.query

    接收

    this.props.location.query.id

    query的特点

    1.不需要配置路由

    2.刷新网页值被销毁

    3.可以传对象

              网页销毁后可以,存入

             localstroge.setItme()或者sessionstorage.setItme()进行存储,

               刷新可以从localstroge或者sessionstorage中获取

    3.state方式传值

    state传值和query方式基本一样把其中的所有的query全部换成state就可以

    在路由上添加

    pathname:'/mine'路由地址
    state:obj对象形式传值
    <Link to={{pathname:'/mine',state:obj}}>Mine</Link>

     在子展示页面使用

    this.props.location.state

    接收

    this.props.location.state.id

    params的特点

    1.不需要配置路由

    2.刷新网页值不会被销毁

    3.可以传对象

        刷新不会网页值不会被销毁,

    然而重新输入当前网址,网页的值会被销毁

    query和state不会再url上显示,类似于post

    params会在url上显示,类似于get

    
    
  • 相关阅读:
    50.2 Django 连接MySQL,django orm 数据库(models)操作
    50.1 Django 静态资源配置 static && form表单和 request对象
    JS备忘
    Python 单元测试 生产HTML测试报告
    python 单元测试 执行测试
    pycharm 安装插件
    Python 单元测试 实战演练
    Python 单元测试
    Pycharm 使用备忘
    Python 异常
  • 原文地址:https://www.cnblogs.com/wulicute-TS/p/11995306.html
Copyright © 2011-2022 走看看