今天在做嵌套路由的时候,没有报错,但是页面显示为空,搜索了一下资料,有两个原因:

1.exact精确匹配

 <Route component={xxx} path="/" />

 路径为“/”的时候用了exact精确查找,所以不会查找到页面的嵌套路由

2.路由的顺序:

去除了exact之后,无论进哪个页面都是“/”对应的页面,这个时候,只需要把路由的顺序调整一下,把“/”这个Route放到最后即可

react-router 嵌套路由 内层route找不到的更多相关文章

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

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

  2. react中的路由配置踩坑记

    react 路由配置中,如果根路由(/)匹配一个组件,另一个路由(/list)在进行匹配的时候也会匹配到根路由(/),即在 /list 页面展示的时候 / 页面总是展示在上方. 此时如果想进行严格匹配 ...

  3. React 实践记录 03 React router

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

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

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

  5. vue(19)嵌套路由

    嵌套路由 有时候在路由中,主要的部分是相同的,但是下面可能是不同的.比如访问首页,里面有新闻类的/home/news,还有信息类的/home/message.这时候就需要使用到嵌套路由.项目结构如下: ...

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

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

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

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

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

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

  9. react 中的路由 Link 和Route和NavLink

    route是配置,link是使用 https://blog.csdn.net/chern1992/article/details/77186118(copy) 嵌套路由一般使用Route,类似于vue ...

随机推荐

  1. 透彻讲解,Java线程的6种状态及切换

    Java中线程的状态分为6种. 1. 初始(NEW):新创建了一个线程对象,但还没有调用start()方法.2. 运行(RUNNABLE):Java线程中将就绪(ready)和运行中(running) ...

  2. 吴恩达机器学习笔记48-降维目标:数据压缩与可视化(Motivation of Dimensionality Reduction : Data Compression & Visualization)

    目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...

  3. C语言那年踩过的坑--局部变量,静态变量,全局变量在内存中存放的位置

    先看几个概念: 1.bss是英文block started by symbol的简称,通常是指用来存放程序中未初始化的全局变量的一块内存区域,在程序载入时由内核清0.bss段属于静态内存分配.它的初始 ...

  4. pycharm安装plugins

    1 . 启动 PyCharm 软件 2 . 打开 设置(Setting) 窗口.(操作:File -> Setting 或者 按快捷键 Ctrl + Alt + S) 3 . 在搜索框里面搜索: ...

  5. H5 notification浏览器桌面通知

    Notification是HTML5新增的API,用于向用户配置和显示桌面通知.上次在别的网站上看到别人的通知弹窗,好奇之余也想知道如何实现的.实际去查一下发现并不复杂,且可以说比较简单,故写篇博客分 ...

  6. mysql 开发基础系列6 数值与日期函数

    一. 数值函数 1.  abs(x) 返回x的绝对值 SELECT ABS(-0.8),ABS(0.8); 2.ceil(x) 返回大于x的最大整数 SELECT CEIL(-0.8),CEIL(0. ...

  7. CentOS7.0小随笔——指令基本操作(Part.B)

    一.文件与目录基本操作指令 touch命令 在Linux中,touch指令可以建立一个空文件 但如果创建的文件本身存在(指在同一目录下),则会修改文件最后的访问时间,并不会更改文件内的内容. 例:# ...

  8. ①小姐,来桶全家桶不?(Servlet)

    一.前言 小生不才,大二下半学期第二个星期,近11月博客园.星期六闲来看看经典书.重温下Serlvet. 二.温故而知新:超文本转移协议HTTP HTTP协议是通过互联网(internet)或企业内部 ...

  9. c#调用c++ dll的一个例子

    1.创建一个简单的c++ 项目生成动态库. Vs 创建完工程后,打开SampleOperation.cpp文件,看到有个导出函数的例子. 复制这段代码, 修改函数(返回值, 参数列表, 函数的实现) ...

  10. easyui combobox 设置滚动条

    设置滚动条: 1 panelHeight:200  :设置固定的高度. 2 panelHeight:'auto', panelMaxHeight:200. <input class=" ...