<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. Convolutional Pose Machines

    Convolutional Pose Machines 2018-12-10 18:17:20 Paper:https://www.cv-foundation.org/openaccess/conte ...

  2. 【Visual Studio 扩展工具】使用ComponentOne中的GroupDefinition和SortDefinition属性保存和还原布局

    概述 在此前的ComponentOne中,我们为C1FlexGrid(最快,最灵活的.Net数据网格控件)添加了一个非常强大的动态分组功能,这篇技术博客<将动态分组添加到.NET表格控件Flex ...

  3. ABAP 中的搜索帮助

    ABAP 中的搜索帮助 https://blog.csdn.net/u011576750/article/details/50999078 一.简介:在abap中,用到的搜索帮助个人遇到的情况如下,进 ...

  4. ORM查询条件

    模板: from django.db import models class Article(models.Model): title = models.CharField(max_length=20 ...

  5. 廖雪峰JavaScript学习笔记(基础及数据类型、变量)

    先睹为快 alert('我要学JavaScript!'); Run: 基本语法: 1.每个语句以;结束,不强制 2.语句块用{...} 3.//单行注释,/*...*/ 多行注释 数据类型: 1.不区 ...

  6. js 简版双色球 取号

    <style type="text/css"> span{ display: block; float: left; width: 50px; height: 50px ...

  7. C#退出程序方法分类

    1.this.Close();   只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出:

  8. laravel orwhere的使用

  9. jQuery中异步问题:数据传递

    最近写一个新页面,涉及到异步问题,为了获得异步过程中的数据,以下分享两种方法: 两种方法一句话总结: 方法一,Http请求后调用.then实现response的数据同步,然后根据resp接着处理: 方 ...

  10. 『TensorFlow』变量初始化

    变量初始化实质 initializer操作的流程是调用Variable节点组中的Assign节点为节点操作单元分配初始值 变量初始化方法 tf.Variable_initializer([variab ...