路由地址：　　 内容：

　　/　　 　　　　根

　　/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. python实现二维码、条形码识别

    环境: python 3.7 Win7 依赖包安装: pip install pillow pip install opencv-python pip install opencv-contrib-p ...

  2. Let's GO(二)

    人生苦短,Let's GO Let's GO(一) Let's GO(二) Let's GO(三) Let's GO(四) 今天我学了什么? 1. Map map:映射,使用散列表(hash)实现 m ...

  3. display:inline-block 什么时候不会显示间隙？

    移除空格 使用margin负值 使用font-size:0 letter-spacing word-spacing

  4. 数据可视化之DAX篇（七） Power BI中用DAX生成的表如何添加索引列？

    ​https://zhuanlan.zhihu.com/p/74732578 来源于知识星球中一个星友的问题,使用DAX在PowerBI中新建了一个表,如何为这个表添加索引列呢? 假如数据模型中只有一 ...

  5. Python之爬虫（二十五） Scrapy的中间件Downloader Middleware实现User-Agent随机切换

    总架构理解Middleware 通过scrapy官网最新的架构图来理解: 这个图较之前的图顺序更加清晰,从图中我们可以看出,在spiders和ENGINE提及ENGINE和DOWNLOADER之间都可 ...

  6. Docker 基础知识 - 使用卷(volume)管理应用程序数据

    卷(volumes)是 Docker 容器生产和使用持久化数据的首选机制.绑定挂载(bind mounts)依赖于主机的目录结构,卷(volumes)完全由 Docker 管理.卷与绑定挂载相比有几个 ...

  7. 系统部署时的Could not load file or assembly 'Microsoft.VisualStudio.Enterprise.ASPNetHelper问题

    在web.config中,如下代码段 <compilation debug="true" targetFramework="4.0" assemblyPo ...

  8. 信不信？各种红包App最后都会整合游戏！App+游戏的变现模式分析

    最近两个月「晓衡在线猿码微服」商城上出现了一类需求特别的客户: 我们有个 App,日活用户达到 XXX万,计划在 App 中嵌入游戏增加用户留存和利用流量变现,还有... 看你们这里游戏不少,想了解一 ...

  9. The Prices

    题目描述 你要购买\(m\)种物品各一件,一共有\(n\)家商店,你到第\(i\)家商店的路费为\(d[i]\),在第家商店购买第\(j\)种物品的费用为\(c[i][j]\),求最小总费用. 输入格 ...

  10. Intelij DataGrip 的安装和使用

    链接: Intelij DataGrip 安装教程以及汉化教程 Intelij DataGrip 使用教程 以上两个教程已使用过,没有问题 如有侵权请联系删除