路由地址：　　 内容：

　　/　　 　　　　根

　　/user 　　　　用户

　　/user/hh　　　用户笑了

先说exact：(此时没有Switch)，给 / 设置exact精确匹配

　　地址栏： /user/hh

　　渲染2个组件 :
　　　　用户
　　　　用户笑了

再说Switch:(此时没有exact)
　　地址栏：/user 或者 /user/hh
　　只渲染1个组件：
　　　　　　　　根

当既有Switch又有exact时
　　　　地址栏　　 -> 　　渲染
　　　　/user 　　 ->　　  用户
　　　　/user/hh     ->       用户 (不会渲染：用户笑了。
因为Switch匹配一个后就停止匹配，在 / 上加exact后只有当地址栏是 / 时才匹配到)

react-router-dom中Switch和exact的更多相关文章

  1. React 点击删除列表中对应项（React 获取DOM中自定义属性）

    点击删除按钮,删除列表中对应项本来是React比较基础的应用,可是应用情况变得复杂了以后,我还真想了一会儿才搞定. 简化一下应用场景:点击新增按钮,增加一条输入框,点击输入框旁边的按钮,删除该输入框( ...

  2. React Router教程

    React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...

  3. React Router学习

    React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...

  4. [Web 前端] React Router v4 入坑指南

    cp from : https://www.jianshu.com/p/6a45e2dfc9d9 万恶的根源 距离React Router v4 正式发布也已经过去三个月了,这周把一个React的架子 ...

  5. React Router V4发布

    React Router V4 正式版发布,该版本相较于前面三个版本有根本性变化,遵循 Just Component 的 API 设计理念. 本次升级的主要变更有: 声明式 Declarative 可 ...

  6. react的路由中的switch和exact的使用

    刚刚接触react不久,发现在项目中的路由配置中会有switch和exact的使用,现总结如下 switch  为了解决route的唯一渲染(仅仅渲染一个路由路径)出现的 <Switch> ...

  7. [React Router v4] Conditionally Render a Route with the Switch Component

    We often want to render a Route conditionally within our application. In React Router v4, the Route ...

  8. [React Router v4] Render Catch-All Routes with the Switch Component

    There are many cases where we will need a catch-all route in our web applications. This can include ...

  9. React 16 源码瞎几把解读 【三 点 一】 把react组件对象弄到dom中去(矛头指向fiber，fiber不解读这个过程也不知道)

    一.ReactDOM.render 都干啥了 我们在写react的时候,最后一步肯定是 ReactDOM.render( <div> <Home name="home&qu ...

随机推荐

  1. 反转链表（剑指offer-15）

    方法1:递归 /* public class ListNode { int val; ListNode next = null; ListNode(int val) { this.val = val; ...

  2. day05 垃圾回收机制（超小白讲解）

    垃圾回收机制 在学习这个抽象概念前,老习惯,灵魂二问 什么是?为什么要有? 引言:在程序运行到变量定义时,会在内存空间中存放变量值,然而内存空间是有限的,变量是无限的. Q:如何在有限的内存里存里存放 ...

  3. JavaScript的参数是按照什么方式传递的？

    1.基本类型传递方式 <script> var a = 1; function test(x) { x = 10; console.log(x); } test(a); // consol ...

  4. SpringBoot执行定时任务@Scheduled

    SpringBoot执行定时任务@Scheduled 在做项目时,需要一个定时任务来接收数据存入数据库,后端再写一个接口来提供该该数据的最新的那一条. 数据保持最新:设计字段sign的值(0,1)来设 ...

  5. vue 实现滑块验证码

    图一为拖拽前效果,图二为拖拽后效果 一.新建文件JcRange.vue,代码如下: 1.模板代码: <template> <div class="jc-component_ ...

  6. C# Dictionary的底层实现解析

    引用: https://www.cnblogs.com/InCerry/p/10325290.html 字典原理分析: 1.用数组存元素,元素的结构体存hashCode.next.key.value. ...

  7. Ethical Hacking - GAINING ACCESS(23)

    CLIENT SIDE ATTACK - BeEF Framework Hooking targets using MITMF Tools: MITMF and BeEF Start BeEF and ...

  8. javascript : 点击按钮，把某标签中的内容复制到剪贴板

    需求如题. 静态页面如下. 需要的库:jquery(不用应该也能做). 浏览器:PC chrome 68 Mobile MIUI9.5(Android 7) <p>1.用电脑打开网址:&l ...

  9. Maven配置文件中的版本使用-SNAPSHOT

    SNAPSHOT是什么? SNAPSHOT是快照,是一种特殊的版本,制定了某个当前的开发进度副本.不同于正式版本,Maven每次构建都会在远程仓库中检查新的快照.如此每次发布更新代码的快照到仓库中,新 ...

  10. 深入理解JVM（一）Java内存区域

    运行时数据区 程序计数器 当前线程执行的字节码的行号指示器 每条线程都有独立的程序计数器,各线程之间计数器互不影响,独立存储. 如果执行的是java方法,计数器记录正在执行的虚拟机字节码指令的位置: ...