zoukankan      html  css  js  c++  java
  • react在router中传递数据的2种方法

    概述

    不传递数据叫什么单页面应用,渲染模块还需要http请求算什么单页面应用。

    本文总结了react-router4中使用BrowserRouter时传递数据的两种方法,供以后开发参考,相信对其他人也有用。

    Link是react-router4中很常见的一个类,很多人在页面跳转的时候都会用到它。在用Link的时候传递数据的方法如下:

    import { Link } from 'react-router-dom';
    
    //不传递数据
    <Link to={模块路径}>{内容}</Link>
    
    //传递数据,在目标模块用this.props.location.state调用数据。
        <Link to={{
            pathname: {模块路径},
            state: {数据}
        }}>{内容}</Link>
    

    使用history.push

    history是H5中引入的,以前人们都用hash。

    react-router4中有好几种方法使用history.push。下面我介绍使用BrowserRouter时使用的方法。

    import { withRouter } from 'react-router-dom';
    
    //不传递数据
    this.props.history.push({目标模块路径});
    
    //传递数据,在目标模块用this.props.location.state调用数据。
    this.props.history.push({
        pathname:{目标模块路径},
        state:{数据}
        })
    
    export default withRouter(自身模块名)
    

    区别

    点击的时候跳转并传递数据:既可用Link方法,也可以用history.push方法(需要结合Onclick方法,在点击事件的回调函数里面调用history.push)。

    js控制跳转并传递数据:只能用history.push方法。(直接在js中使用history.push)

    另外说下,在模块中获取路由的/:id中的id:在this.props.match.params.id中获取。(其中id可换为其它参数。)

  • 相关阅读:
    iframe高度自适应方法
    mysql left join对于索引不生效的问题
    禁止百度转码和百度快照缓存的META声明
    使用graphviz绘制流程图
    安装php扩展sphinx-1.2.0.tgz和libsphinxclient0.9.9
    5种主要的编程风格和它们使用的抽象
    Nodejs调用Aras Innovator服务,处理AML并返回AML
    使用Rancher管理Docker
    docker容器间通信
    使用Portainer管理Docker
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/8495459.html
Copyright © 2011-2022 走看看