//第一种  通过问号传参
//发送
this.props.history.push("/detail?id="+item.downurl)
//路由表配置
<Route path="/detail" component={Detail} exact></Route>
//接收 可以获取到?后面的方法
this.props.location.search
无弊端 刷新参数也有 //第二种 通过/传参 也就是动态路由!!!
//发送
this.props.history.push("/detail/"+8)
//路由表配置
<Route path="/detail/:id" component={Detail} exact></Route>
//接收 可以获取到关于id的一个对象
this.props.match.params
无弊端 刷新参数也有 //第三种通过对象发送跳转路由
this.props.history.push("/detail",{downurl:999});
//路由表配置
<Route path="/detail" component={Detail} exact></Route>
//接收 可以获取到一个关于downurl的对象
this.props.location.state
弊端!!!
通过HashRouter设置的路由可以跳转但是访问不到参数!!! //通过标签跳转加传参
第一种单纯的跳转不传参
<Link to="/main/list"><Link> 第二种传参数跳转
<Link to={{
pathname:"/detail",
search:"?id=1", //获取this.props.location.search
state:{fromDashboard:11}//获取this.props.location.state
}}>跳起来啊啊啊啊
</Link> //路由表配置
<Route path="/detail" component={Detail} exact></Route>

     不足知足欢迎补充喽~~~

5.0.1版本的react-router-dom路由传参以及路由表的配置和接收页面的接受的更多相关文章

  1. react router @4 和 vue路由 详解(五)react怎么通过路由传参

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...

  2. React跳转路由传参3种方法和区别

    1.params传参 路由表配置:参数地址栏显示 路由页面:<Route path='/demo/:id' component={Demo}></Route> //配置 /:i ...

  3. 从 React Router 谈谈路由的那些事

    React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...

  4. react router @4 和 vue路由 详解(六)vue怎么通过路由传参?

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...

  5. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  6. React 版本16.9.0 中配置路由以及路由传参

    我的脚手架版本如下: "dependencies": { "antd": "^3.21.4", "jquery": &q ...

  7. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  8. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  9. vue3.x版本路由router跳转+传参

    显示传参模式 get import { useRouter } from 'vue-router'; const router = useRouter(); let skipEdit = (key: ...

随机推荐

  1. Css 进阶学习

    以下样式,表示css对第一个li标签无效,第一个以后的样式有效. .nav-pills>li+li { margin-left: 2px } <ul class="nav-pil ...

  2. Delphi 设计模式:《HeadFirst设计模式》Delphi7代码---命令模式之RemoteControlTest[转]

      1   2{<HeadFirst设计模式>之命令模式 }   3{ 本单元中的类为命令的接收者      }   4{ 编译工具 :Delphi7.0         }   5{ 联 ...

  3. CentOS7 下的 firewall 用法

    1.firewalld的基本使用 启动: systemctl start firewalld 查看状态: systemctl status firewalld  停止: systemctl disab ...

  4. Spring松耦合示例(转)& IOC

    Spring松耦合示例 轻松学习Spring<一> IoC容器和Dependency Injection模式 最近公司需要,项目中要用到Spring和Ibatis.趁着过年好好学习学习.I ...

  5. flexget安装

    首先新建一个文件夹给flexget下载种子 Flexgetdownloads 注意:如果先安装flexget再创建文件夹则需要手动去分配权限 然后通过勾选我要试用beta版本,来获取flexget 找 ...

  6. Spring boot随时获取ApplicationContex

    @Service public class SpringManager implements ApplicationListener<ContextRefreshedEvent> { pr ...

  7. 模板方法(Template Method)(父类声明算法骨架,子类具体不同实现)

    在阎宏博士的<JAVA与模式>一书中开头是这样描述模板方法(Template Method)模式的: 模板方法模式是类的行为模式.准备一个抽象类,将部分逻辑以具体方法以及具体构造函数的形式 ...

  8. 洛谷P1966 [NOIP2013提高组Day1T2]火柴排队

    P1966 火柴排队 题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi) ...

  9. update批量更新某一列成其它列对应的值【原】

    update批量更新某一列成其它列对应的值 postgresql 标准sql语句 update AA set name = BB.name , AA.sex = BB.sex from BB wher ...

  10. passive的作用和原理

    passived到底有什么用? passived主要用于优化浏览器页面滚动的性能,让页面滚动更顺滑~~ passived产生的历史时间线 addEventListener():大家都是认识的,为dom ...