<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 的写法的更多相关文章

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

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

  2. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  3. React 实践记录 03 React router

    Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...

  4. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  5. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

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

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

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

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

  8. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  9. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

随机推荐

  1. _skill,_skill_category

    _skill,_skill_category -- 自定义商业技能-- 小技巧:配合增加自定义商业技能._add skill [ID _skill `skillId`商业技能ID `skillIcon ...

  2. ionic调用手机系统的拨打电话

    android调用如下: 在config.xml中添加 <access origin="tel:*" launch-external="yes" /> ...

  3. linux——常用命令清单

    目录 文件目录相关命令 压缩命令 关机重启命令 挂载命令 用户登录查看命令 搜索命令的命令 本文整理了学习过程中linux的一些常用操作命令,方便以后查阅.学习的课程是Linux达人养成计划 I. 文 ...

  4. 亲自打造Deferred对象

    经过对比之后,决心学习jQuery,自己打造一个Deferred对象.var util = require('./util.js');function Callbacks() { var list = ...

  5. 盘符格式转换成NTFS格式

    点击屏幕左下角“开始”,找到运行,在其中输入:cmd,确定,打开“命令提示符”; 在命令提示符下输入: convert X:/FS:NTFS(其中X是你要转换的盘符盘符). 执行后,重新启动电脑 这样 ...

  6. 一个二维码如何自动识别是安卓(Android)还是苹果(IOS)

    思考问题: 通常,我们开发一个APP,有Android版本.IOS版本. 但是只有一个二维码?怎么办呢? 怎么让IOS用户扫描二维码下载IOS版本,Android用户扫描二维码下载到Android版本 ...

  7. pandas实现excel中的数据透视表和Vlookup函数功能

    在孩子王实习中做的一个小工作,方便整理数据. 目前这几行代码是实现了一个数据透视表和匹配的功能,但是将做好的结果写入了不同的excel中, 如何实现将结果连续保存到同一个Excel的同一个工作表中?还 ...

  8. 微信支付---H5支付

    这里说的H5支付是指在微信外的浏览器打开H5商家的支付,切勿与公众号微信内支付混淆, 1.H5支付的开通流程 登陆微信商户平台页面:https://pay.weixin.qq.com/wiki/doc ...

  9. Dropout, DropConnect ——一个对输出,一个对输入

    Deep learning: Dropout, DropConnect from:https://www.jianshu.com/p/b349c4c82da3 Dropout 训练神经网络模型时,如果 ...

  10. gdb pretty printer for STL debug in Linux

    Check your gcc version. If it is less than 4.7, you need use another printer.py file. Get the file f ...