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 函 ...
随机推荐
- C# 说说lock到底锁谁?(2)
摘要 今天在园子里面有园友反馈关于[C#基础]说说lock到底锁谁?文章中lock(this)的问题.后来针对文章中的例子,仔细想了一下,确实不准确,才有了这篇文章的补充,已经对文章中的demo进行修 ...
- Spring中ClassPathXmlApplication与FileSystemXmlApplicationContext的区别
Spring中ClassPathXmlApplication与FileSystemXmlApplicationContext的区别 一.概述 在项目中遇到加载不到Spring配置文件,简单分析后,写此 ...
- Tampermonkey脚本属性
新建脚本属性: // ==UserScript== // @name New Userscript 脚本名 // @namespace http://tampermonkey.net/ 脚本主页 // ...
- MySQL中case then用法
1.查询图书价格,若价格为null,则显示unknown,若价格为10到20, 则显示10 to 20 SELECT price, CASE WHEN price='null' THEN 'UnKno ...
- chrome 调试功能使用说明
单文件搜索 ctrl+f 全局搜索 ctrl+shift+f
- C# 文件/文件夹压缩解压缩
项目上用到的,随手做个记录,哈哈. 直接上代码: using System; using System.Data; using System.Configuration; using System.C ...
- LeetCode--038--报数(java)
报数序列是一个整数序列,按照其中的整数的顺序进行报数,得到下一个数.其前五项如下: 1. 1 2. 11 3. 21 4. 1211 5. 111221 1 被读作 "one 1" ...
- MongoDB AUTH结果验证
创建超级管理员和普通用户 #创建超级管理员 super db.createUser( { user: "super", pwd: "super", role ...
- js实现下拉框模糊查询
keyup方法触发模糊查询 list : Array<any> //下拉列表所有内容 filtList:Array<any> //过滤后的内容 inputContent : s ...
- learning makefile static model