react.js 基础知识第一章

本文是React.js的学习笔记,重点探讨路由基础知识。`exact`属性用于精确匹配,通常仅在`path="/"`时使用,避免路径如`/a`同时显示根路径组件。`<switch>`标签实现横向匹配,确保只显示第一个匹配的路由,常与`exact`配合使用以优化路由逻辑。`<Router>`是BowerRouter的别名。
摘要由CSDN通过智能技术生成

这一篇文章 主要是以一个学习笔记为主,并不是一个全面的视频 。只是作为一个记录。 

路由的小知识点:

当我们使用路由的时候 ,exact 一般只加到 path=“/”的时候, 这个属性的意思是 精确匹配。也就是 如果没有这个属性。我们path=“/a” 会同时显示 path=“/” 和 path="/a" 两个路由的组件。

为什么只有 path=“/” 的时候使用的比较多  而且他的比较少,因为我们在使用 例如 path="/a"的时候 如果 加了 exact 这个属性,

那么  如果还有子组件 path="/a/child"  这个子组件是不会显示出来的,因为 exact 这个属性 在/a的时候已经 拦截了 你输入/a/child的时候不会显示/a组件 从而不会加载 /a的子组件。所以我们一般称之为 深度匹配 

<switch> 这个标签的作用 主要是用在横向匹配。什么意思,就是和上面例子一样  假设我们有 path="/" path=“/a” 当我们输入 /a的时候 会显示两个页面同时出来 那么 如果我们使用 <switch></switch>包裹之后 他会只匹配第一个找到的路由页面,而不会显示其他的 但是这样我们就只显示了 path="/"的页面 所以我们需要调换一下位置 让 path="/a" 放在 path&#

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值