<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. 09.vue中样式-style

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 一: DRF web应用框架基础,及序列化器的使用

    ---恢复内容开始--- 一: web 应用模式(有两种) 1: 前后端不分离(前端从后端直接获取数据) 2: 前后端分离 二: api 接口 原因一: 为了在团队内部形成共识.防止个人习惯差异引起的 ...

  3. kafka在windows上的安装、运行

    https://blog.csdn.net/u010283894/article/details/77106159 kafka 创建消费者报错 consumer zookeeper is not a ...

  4. html代码换行造成空格间距问题

    连续几个内联标签或表单元素标签的换行在浏览器会被解释为一个空格. 比如下面代码: <span style="border:1px solid #f20">hello&l ...

  5. Promise使用

    Promise可以进行异步操作,比起回调函数,更加容易维护. 首先创建一个简单的Promise var p = new Promise( () => {}); console.log(p); / ...

  6. Android app图标总是显示默认的机器人图标,且在manifest文件的application中修改无效...

    问题描述:我使用的开发工具是eclipse,Android app默认的图标是一个机器人,如下图所示 现在我要将app的图标修改成另外一个图标: 探索过程: 首先想到修改Manifest文件中的app ...

  7. zend cache使用

    require_once 'Zend/Cache.php';//引用文件$frontendOptions = array( 'lifeTime' => 60, // cache lifetime ...

  8. 选择器:first-child与:last-child失效的解决方法

    作为还在努力练习的代码小白来说,有时类名或者ID名太多很容易就会搞混,为此,在练习中会想着借用多样的选择器来设置而不是每一个标签都设一个类名(Id名),在此次练习中使用选择器:first-child与 ...

  9. 颜色(color)透明

    颜色写法: 1.英文单词 backgroud-color:red: 2. #fff background-color:#fff; 3.#fefefe background-color:fefefe; ...

  10. 蓝桥杯 算法训练 素因子去重 (java)

    问题描述 给定一个正整数n,求一个正整数p,满足p仅包含n的所有素因子,且每个素因子的次数不大于1   输入格式 一个整数,表示n   输出格式 输出一行,包含一个整数p.   样例输入 1000   ...