路由地址：　　 内容：

　　/　　 　　　　根

　　/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. Git篇--将代码上传到git完整版

    1.注册github账号. 2.创建个人的github仓库,如图,   或者也可以进入个人中心去创建,   还可以直接点击右上角的“”+“”添加, 3.创建自己的Repository,如图: 4.新建 ...

  2. Kail系统更新指令

    0x00源更新 国内更新源 leafpad /etc/apt/sources.list 然后复制粘贴下面的源 #kali官方源 deb http://http.kali.org/kali kali-r ...

  3. 央行数字货币(CBDCs)的互操作性至关重要

    CBDCs(央行数字货币)将在我们的有生之年产生重大的金融转变.然而,除非这些工具吸取了法定货币的教训,否则创新将毫无意义.互操作性一直是影响CBDC采用和功能的最重要障碍之一.因此,各国央行在这一理 ...

  4. 权益质押（Staking）：这是关于什么的？

    我们最近发表了三篇讲述Fetch.AI分类帐本的文章.这些概述: 我们的权益质押计划的主要特点和验证器的作用 影响我们设计权益质押模型设计的因素 我们的创新共识协议将如何改变用户体验 这些文章包含大量 ...

  5. java NIO 实例之多人聊天

    关键抽象 1.定义一个HashMap<String,SocketChannel>用户存储每个用户的管道. 2.服务端监听read事件,获取消息后轮询hashmap发送消息给用户模型内的所有 ...

  6. 准备开始了解orchardcore，有兴趣的一起啊

    orchardcore网上的资料真是少,开始看源码,目前遇到的最大问题是不知道ModuleName属性如何自动注入到OrchardCore.Cms.Web的程序集Assembly上面,等这个搞通了估计 ...

  7. day58 前端收尾

    目录 一.jQuery结束 1 阻止后续事件执行 2 阻止事件冒泡 3 事件委托 4 页面加载 5 动画效果 6 补充知识点 二.前端框架Bootstrap 1 布局容器 2 栅格系统 3 栅格参数 ...

  8. 某cms代码审计

    前言   前几个礼拜上课老师带着挖cms的洞,挖出个cookie反序列化注入漏洞,和报错注入并且提交了cnvd.昨天去找源码的时候发现它更新了一个版本,更新日志上也没说修复,就想着看看漏洞还存不存在, ...

  9. MYSQL 之 JDBC（五）： 增删改查（三）PreparedStatement

    是Statement的子接口,可以传入带占位符的sql语句,并且提供了补充占位符变量的方法. 使用Statement需要进行拼写SQL语句,很辛苦,很容易出错. 引号的问题处理很复杂,不利于维护. 可 ...

  10. 机器学习实战基础（八）：sklearn中的数据预处理和特征工程（一）简介

    1 简介 数据挖掘的五大流程: 1. 获取数据 2. 数据预处理 数据预处理是从数据中检测,纠正或删除损坏,不准确或不适用于模型的记录的过程 可能面对的问题有:数据类型不同,比如有的是文字,有的是数字 ...