react-router 父子路由同时要接收 params 的写法
<Route
path="/profile/:companyId/:companyName"
component={Profile}
onEnter={(nextState, replace, next) => {getLoginStatus(next);}}
>
<IndexRoute component={Circle} />
<Route path="/profile/circle/:companyId/:companyName" component={Circle} />
<Route
path="/profile/community/:companyId/:companyName"
component={Community}
onEnter={this.verifyIsPay}
/>
<Route
path="/profile/district/:companyId/:companyName"
component={District}
onEnter={this.verifyIsPay}
/>
<Route
path="/profile/industry/:companyId/:companyName"
component={Industry}
onEnter={this.verifyIsPay}
/>
<Route
path="/profile/shareholding/:companyId/:companyName"
component={Shareholding}
onEnter={this.verifyIsPay}
/>
<Route
path="/profile/event/:companyId/:companyName"
component={Event}
onEnter={this.verifyIsPay}
/>
<Route
path="/profile/statistics/:companyId/:companyName"
component={Statistics}
onEnter={this.verifyIsPay}
/>
</Route>
如代码所示,父路由要接收参数,子路由也要接收参数。
这种情况下,子路由就需要写完整的路径:/profile/community/:companyId/:companyName,而不是简写的:community/:companyId/:companyName。
完整的路径才能正常匹配,而简写方式会将 community 匹配给 /profile/:companyId/:companyName 的 :companyId,从而找不到路由。
react-router 父子路由同时要接收 params 的写法的更多相关文章
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- React Router v4 页面传值的三种方法
传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...
- React 实践记录 03 React router
Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...
- react router 4.0以上的路由应用
thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...
- react router @4 和 vue路由 详解(七)react路由守卫
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...
- react router @4 和 vue路由 详解(六)vue怎么通过路由传参?
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 8.vue怎么通过路由传参? a.通配符传参数 //在定义路由的时候 { path: ' ...
- react router @4 和 vue路由 详解(五)react怎么通过路由传参
完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 7.react怎么通过路由传参? a.通配符传参(刷新页面数据不丢失) //在定义路由的 ...
- react router @4 和 vue路由 详解(全)
react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...
- React Router 4.0 实现路由守卫
在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...
随机推荐
- [CodeForces 372A] Counting Kangaroos is Fun
题目链接:http://codeforces.com/problemset/problem/372/A 二分思想 AC代码: #include <cstdio> #include < ...
- JavaScript的Let用法
let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值. 描述 let 允许你声明一个作用域或被限制在块级中的变量.语句或者表达式. 与var不同的是,它声明的变量只能是全局或者整个函 ...
- U3D外包公司—北京动点(公司性质)承接U3D、Kinect、VR虚拟现实,增强现实,体感互动,大屏互动等各类外包
unity3d外包就找动点软件承接虚拟现实项目外包 承接U3D.Kinect.VR虚拟现实,增强现实,体感互动,大屏互动等各类外包 联系请加QQ:372900288 联系电话:13911652504 ...
- 【Core】.NET Core 部署( Docker + CentOS)
CentOS 下 Docker安装 使用脚本安装 Docker (1)安装docker sudo yum install docker (2)启动docker systemctl start do ...
- java笔记 -- GregorianCalendar和DateFormateSymbols 类方法
java.util.GregorianCalendar new GregorianCalendar() 构造一个日历对象, 用于表示默认地区,默认时区的当前时间. new GregorianCalen ...
- echarts的axisLabel的文字内容过长的解决办法
通过查找资料学习,我总结了四种解决的办法,不一定是最好的,但是希望能够帮助到需要的童鞋,同时如果大家有什么更好的方法欢迎指导. 方法一:这种方法就是将文本内容转换为字符串数组,然后再按需求换行,需要每 ...
- js验证银行卡号 luhn校验规则
<script type="text/javascript"> //luhn校验规则:16位银行卡号(19位通用): // 1.将未带校验位的 15(或18)位卡号从右 ...
- laravel 实现增 与查
//调用模型层 <?phpnamespace App;use Illuminate\Support\Facades\DB;use Illuminate\Database\Eloquent\Mod ...
- 分布式监控系统(类zabbix)
目录: 为什么要做监控? 监控系统业务需求分析: 监控系统架构设计: 监控系统表结构设计: 一.为什么要做监控系统? 市面上已经有很多成熟的监控系统,例如zabbix.nagios,为什么自己开发监控 ...
- 2018,ANG发展峰会惊喜来袭
区块链的分享——ANG发展峰会重大来袭!2018年10月28日 时至今日,区块链技术已经被越来越多的人所熟知.法国著名的高新公司——凡赛公司汇集世界区块链专家,斥巨资打造了行业领先的区块链技术团队,并 ...