嵌套的路由中,子级的Link跳转到父级时,页面无法整个渲染到父级。

原因:某一级的路由用了Router组件,导致内部Link的时候无法将整个页面渲染到“/”

解决方法:全局一个Router。

子级的兄弟路由无法匹配

原因:顶层路由<Route>用了exact,导致最开始的‘/about’无法匹配到’/about/sth‘,由于上一级路由中about被限定在/about,一旦路由到/about/xx,about页面不会渲染,导致页面不显示。

解决方法:某个路由底下有嵌套路由时,不要加exact,不要加exact,不要加exact

react-router 4v 路由嵌套问题的更多相关文章

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

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

  2. React Router 4.0 ---- 嵌套路由和动态路由

    嵌套路由,从广义上来说,分为两种情况:一种是每个路由到的组件都有共有的内容,这时把共有的内容抽离成一个组件,变化的内容也是一个组件,两种组件组合嵌套,形成一个新的组件.另一种是子路由,路由到的组件内部 ...

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

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

  4. React 实践记录 03 React router

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

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

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

  6. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  7. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

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

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

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

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

随机推荐

  1. 常用的python开发工具对比

    一名优秀的Python开发人员都有一套好用的Python开发工具,好的开发工具可以使Python开发人员的工作更高效,以下是几款比较好用的Python开发工具,Python开发人员,尤其是初学者,可以 ...

  2. (第五篇)Linux操作系统基本结构介绍

    Linux操作系统基本结构介绍 Linux系统一般有4个主要部分:内核.shell.文件系统和应用程序.内核.shell和文件系统一起形成了基本的操作系统结构,它们使得用户可以运行程序.管理文件并使用 ...

  3. Qt5 escape spaces in path

    There are two possible ways. You can either use escaped quotes (inserting the string between quotes) ...

  4. How to skip all the wizard pages and go directly to the installation process?

    https://stackoverflow.com/questions/22183811/how-to-skip-all-the-wizard-pages-and-go-directly-to-the ...

  5. 修改CENTOS7的网卡ens33修改为eth0

    1.先编辑网卡的配置文件将里面的NAME DEVICE项修改为eth0 vim /etc/sysconfig/network-scripts/ifcfg-ens33 2.[root@linux-nod ...

  6. java中Locks的使用

    文章目录 Lock和Synchronized Block的区别 Lock interface ReentrantLock ReentrantReadWriteLock StampedLock Cond ...

  7. Shiro(二):Spring-boot如何集成Shiro(上)

    这篇文章主要介绍了spring-boot是如何集成shiro的authentication流程的. 从shiro-spring-boot-web-starter说起 shiro-spring-boot ...

  8. 被@ResponseBoby注释的方法在拦截器的posthandle方法中设置cookie失效的问题

    文章标题可能有点绕口.先来解释下遇到的问题. 我写了一个拦截器,希望能够实现保存特定方法的请求参数到cookie中. public class SaveParamInterceptor extends ...

  9. CSS开发技巧(一):button样式设置

    button样式需要注意的有几点: 1.建议有一个最小宽度,以免在文字很少时使得按钮过于窄,宽高不协调: 2.建议有一个padding,以免内部文本显得过于拥挤: 2.hover时需要有颜色变化,以告 ...

  10. 替换input单选框的样式

    实现效果:. css的input单选框的样式很丑,有时候不想使用原生的样式,如上照片,可以使用下面的方法. 思路是,给inpu加visibility:hidden隐藏,然后使用不同的图片绝对定位覆盖在 ...