嵌套的路由中,子级的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. 2019-2020-1 20199308《Linux内核原理与分析》第二周作业

    <Linux内核分析> 第一章 计算机工作原理 1.1 存储程序计算机工作模型 冯·诺依曼体系结构 各种计算机体系结构需要遵从的一个"客观规律" 结构图 冯·诺依曼体系 ...

  2. docker配置dns与容器的访问控制(6)

    Docker 没有为每个容器专门定制镜像,那么怎么自定义配置容器的主机名和DNS配置?秘诀就是它利用虚拟文件来挂载到容器的3个相关的配置文件. 进入容器内使用mount命令可以看到挂载信息,这种机制可 ...

  3. [Qt] 默认的槽函数 例如 on_pushButton_clicked()

    在 setupUI 函数里有一句: QMetaObject::connectSlotsByName(QWDialog); 它假设槽函数的名称是 void on_<object name>_ ...

  4. vue与众不同的学习方式,让她年薪200多万

    学习vue正确思路,是先学vue-cli,再学vue.js单文件引用的用法,这样会在极短时间内撤底撑握vue,如果先学vue.js单文件用法,再去学vue-cli4,可以说是重新学vue,,,,难处大 ...

  5. Omnicore RPC API中文文档

    2019独角兽企业重金招聘Python工程师标准>>> OmniCore是比特币核心的一个分支,它在比特币协议之上实现了一个新的Omni协议层,用于代币发行.众售等应用,USDT就是 ...

  6. Xftp的下载安装,以及如何使用XFtp连接虚拟主机/服务器

    1.下载ftp软件  下载地址: 点我立即下载 2.下载后双击安装  下一步  选择Free for Home/School   然后其他的默认下一步即可 3.打开之前领取的免费一年虚拟主机的网址,登 ...

  7. Vue项目中设置每个单页面的标题

    两种实现方法,第一种方法引入插件,第二种为编程方式实现(推荐) 首先在路由文件index.js中给每个单页面路由添加title routes: [{     path: '/',     name: ...

  8. 全面解析Java语言 Java技能优化集锦

    通用篇 "通用篇"讨论的问题适合于大多数Java应用. 不用new关键词创建类的实例 用new关键词创建类的实例时,构造函数链中的所有构造函数都会被自动调用.但如果一个对象实现了C ...

  9. 数据结构--链式栈--C++实现

    #include <iostream> using namespace std; template<class T>class Stack { private: struct ...

  10. 自定义View实战

    PS:上一篇从0开始学自定义View有博友给我留言说要看实战,今天我特意写了几个例子,供大家参考,所画的图案加上动画看着确实让人舒服,喜欢的博友可以直接拿到自己的项目中去使用,由于我这个写的是demo ...