<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. HDU 4010 Query on The Trees(动态树)

    题意 给定一棵 \(n\) 个节点的树,每个点有点权.完成 \(m\) 个操作,操作四两种,连接 \((x,y)\) :提 \(x\) 为根,并断 \(y\) 与它的父节点:增加路径 \((x,y)\ ...

  2. jackson中@JsonProperty、@JsonIgnore等常用注解总结

    本文为博主原创,未经允许不得转载: 最近用的比较多,把json相关的知识点都总结一下,jackjson的注解使用比较频繁, jackson的maven依赖 <dependency> < ...

  3. WebApi实现验证授权Token,WebApi生成文档等(转)

    using System; using System.Linq; using System.Web; using System.Web.Http; using System.Web.Security; ...

  4. Android 回退键监听

    回退键(back)监听:方法1:回调方法onBackPressed String LOG_TAG="TAG";  @Override    public void onBackPr ...

  5. 第二周javaweb学习进度表

      第一周 所花时间 三天 代码量 200行 博客量 3篇 知识点了解到的 学习到了HTML编程语言的相关知识比如checkbox复选框和radio单选按钮以及form表单的使用方法,form表单可以 ...

  6. selenium自动加载各个浏览器插件

    在自动化测试过程中,通过selenium启动浏览器时,可能需要加载插件(如测试用的firebug.或产品中要求必须添加某插件等).读取用户数据(自己浏览器的配置文件/别人直接给的浏览器配置文件).设置 ...

  7. 牛客练习赛42 C 出题的诀窍

    题目链接:https://ac.nowcoder.com/acm/contest/393/C 这个题就是对于每个数算贡献,如果有相同的数,只计算先出现的数的贡献 对于数x,若它在前i行的数目分别为a1 ...

  8. Github如何创建|删除仓库

    一.创建 1.1.点击官网(https://github.com/),注册并登陆后点击Start a project或者点击网页右上角的加号选择New repository 1.2.网址自动变更为ht ...

  9. Descriptors;Hello1 project中的Web.xml

    Deployment Descriptors(描述符)是一个xml文件,用来描述如何部署一个模块或者应用(根据描述符中定义的配置和容器选项).举例来说,一个EJB的部署描述符会向EJB容器传递如何管理 ...

  10. jvm回收器回收过程一:CMS和 G1的初认知(持续更新中)

    CMS:介绍: 1.CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间的垃圾回收器.对于要求服务器响应速度的应用上,这种垃圾回收器非常适合. 在启动JVM参 ...