路由地址：　　 内容：

　　/　　 　　　　根

　　/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. JSOI2015 Salesman（树型DP）

    [luogu6082] [题目描述] 某售货员小T要到若干城镇去推销商品,由于该地区是交通不便的山区,任意两个城镇之间都只有唯一的可能经过其它城镇的路线. 小T 可以准确地估计出在每个城镇停留的净收益 ...

  2. POJ1852 Ants 题解

    题目 An army of ants walk on a horizontal pole of length l cm, each with a constant speed of 1 cm/s. W ...

  3. arm64-v8a 静态成员模板 undefined reference to

    谷歌发布新包需要64位的so Application.mk 中 APP_ABI := armeabi armeabi-v7a x86 x86_64 arm64-v8a 添加了 arm64-v8a 和 ...

  4. 002.Nginx安装及启动

    一 Nginx yum安装 1.1 前置准备 1 [root@nginx01 ~]# systemctl status firewalld.service #检查防火墙 2 [root@nginx01 ...

  5. include文件包含漏洞

    发现allow_url_include 是on状态 既然已经直接包含了phpinfo()是文件,首先搜索了一下allow_url_include,发现是处于打开的状态. 既然 allow_url_in ...

  6. LDAP注入介绍

    LDAP注入介绍 一. 前言 前些日子在看 OWASP TOP 10 时看到了对LDAP注入攻击的介绍,对此产生了兴趣,在网上经过一番搜索之后找到了构成本文主要来源的资料,整理出来分享给大家. 二. ...

  7. input type=file过滤图片

    <input type="file" accept=".png,.jpg,.jpeg,image/png,image/jpg,image/jpeg"> ...

  8. javascript基础（五）： jQuery

     jQuery javaScript和jQuery的关系? jQuery库,里面存在大量的JavaScript函数 获取jQuery 公式:$(selector).action() <!DOCT ...

  9. Viper解析&加载配置

    Viper解析&加载配置 1    Viper是什么 Viper是一个方便Go语言应用程序处理配置信息的库.它可以处理多种格式的配置.它支持的特性: 设置默认值 从JSON.TOML.YAML ...

  10. Spring IoC深入理解

    本文相关代码(来自官方源码spring-test模块)请参见spring-demysify org.springframework.mylearntest包下. 三种注入方式 1.构造方法注入 pub ...