路由地址：　　 内容：

　　/　　 　　　　根

　　/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. Chive CTF 2020 - Tiki

    题目状态: OPEN - 正在试图解这道题CLOSED - 这道题还没有打开SOLVED - 解决了!鼓掌撒花! 赛事信息: 起止时间:2020-04-09 01:00 ~ 2020-04-12 01 ...

  2. pandas | 使用pandas进行数据处理——DataFrame篇

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是pandas数据处理专题的第二篇文章,我们一起来聊聊pandas当中最重要的数据结构--DataFrame. 上一篇文章当中我们介绍了 ...

  3. Set 和 Map

    1. 数组去重 <script type="text/javascript"> [...new Set(array)] </script> 2. 条件语句的 ...

  4. 数据可视化之powerBI基础（十五）Power BI同步切片器，你知道怎么用吗？

    https://zhuanlan.zhihu.com/p/67932754 在PowerBI报表中,切片器绝对是最常用的控件了,利用它可以进行各种维度的动态切换,同一个页面中的所有图表可以同步响应:利 ...

  5. python 生成器（四）：生成器基础（四）标准库中的生成器函数

    os.walk 这个函数在遍历目录树的过程中产出文件名,因此递归搜索文件系统像for 循环那样简单. 用于过滤的生成器函数 模块  函数  说明 itertools  compress(it,sele ...

  6. day3 python数据类型转换及变量的缓存机制

    类型转换 1,强制类型转换 1.1 number的转换(int,float,bool,complex) num1 = 10 num2 = 10.6 num3 = True num4 = 3 + 4j ...

  7. DEX文件解析--5、dex方法原型解析

    一.前言    前几篇文章链接:     DEX文件解析---1.dex文件头解析     DEX文件解析---2.Dex文件checksum(校验和)解析     DEX文件解析--3.dex文件字 ...

  8. 大型Java进阶专题(八)设计模式之适配器模式、装饰者模式和观察者模式

    前言 ​ 今天开始我们专题的第八课了.本章节将介绍:三个设计模式,适配器模式.装饰者模式和观察者模式.通过学习适配器模式,可以优雅的解决代码功能的兼容问题.另外有重构需求的人群一定需要掌握装饰者模式. ...

  9. 面试高频SpringMVC执行流程最优解（源码分析）

    文章已托管到GitHub,大家可以去GitHub查看阅读,欢迎老板们前来Star! 搜索关注微信公众号 码出Offer 领取各种学习资料! SpringMVC执行流程 SpringMVC概述 Spri ...

  10. 最简单的VScode Python 开发环境配置以及中文化

    前置条件 Python 3.X(2020年了,建议使用Python3.X版本) 一.下载VSCode VSCode官方下载链接 由于安装过程是中文界面,此处略过. 二.VSCode中文化 不需要配置什 ...