React 之Route中的属性exact

最新推荐文章于 2024-04-22 16:55:50 发布
最新推荐文章于 2024-04-22 16:55:50 发布
阅读量912 收藏
点赞数 1
分类专栏： react 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liberal_w/article/details/106788950
版权

在React的App.js文件中设置路由跳转标签时如果主界面Home的<Route/>标签没有设置exact属性 ，在点击<Route/>标签进入对应的界面时，Home界面的内容也会显示；如下所示

界面路由代码：

<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/topics" component={Topics}/>

未添加exact属性时的About界面： 

添加了exact属性时展示的About界面：

慌慌.zz
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-route+webpack项目工程
06-01
React-Route 是React生态系统中的路由库，它允许我们在React应用中定义和管理多个视图。React-Route 提供了基于URL的导航，使得在不刷新整个页面的情况下，可以平滑地切换应用的不同部分。 现在，让我们来看看如何...
【React-Router】exact 属性 与 Umi 路由下的 exact
Milk~每天分享一点点，技术进步一点点
10-12 1458
React-Router exact 属性 exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些 exact的值为bool型，为true是表示严格匹配，为false时为正常匹配 如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的 一个常用的场景是这样的： <Route path='/' component={Home} /> <Route path='/page'
React-route-exact属性
qq_41709082的博客
12-09 921
React-Route-exact属性 1.一般情况下react中Route匹配会匹配所有path中含有匹配条件(to属性值)的路由。此处匹配条件一般指的是Link标签中的to属性或Redirect标签中的to属性值。 如下情况： &lt;Route path='/' component={Home} /&gt; &lt;Route path='/index' component={Index}...
React 报错之 Property ‘exact‘ does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes＜Ro
最新发布
CHUZHI_的博客
04-22 318
解决办法：回过头来想yarn.lock文件，重置项目，将锁文件中只是 ‘thunisoft’ 的这一个修改，不删除文件，再次安装依赖，成功运行，再去看两种方式生成的lock文件，发现删除文件后安装依赖自动生成的lock中，多数依赖的小版本都不相同。查阅资料得知：这个错误提示表明在尝试通过HTTPS连接到一个服务器时，该服务器的SSL/TLS证书已经过期。总结：lock文件对于项目还是十分重要的，特别是一些老项目。解决办法：将该url直接扔到浏览器，发现多台设备均无法访问，后问得知不需要此文件。
React route中exact用法
u011435776的博客
10-28 2867
在学习自己配置路由是遇到这个问题，就是 <Route path='/goods' component={Goods} /> <Route path='/goods/:id' component={GoodDetail} /> 当匹配路由为/goods/:id，会匹配Goods组件和GoodDetail组件 但是我们期望得到GoodDetail 解决方法有两...
React学习笔记_按需加载
架构师的成长之路的博客
11-23 1246
在react-router4中进行代码拆分（基于webpack） 前言 随着前端项目的不断扩大，一个原本简单的网页应用所引用的js文件可能变得越来越庞大。尤其在近期流行的单页面应用中，越来越依赖一些打包工具（例如webpack），通过这些打包工具将需要处理、相互依赖的模块直接打包成一个单独的bundle文件，在页面第一次载入时，就会将所有的js全部载入。但是，往往有许多的场景，我们并不
详解升级react-router 4 踩坑指南
qq_39963971的博客
10-27 1610
一.前言 上午把近日用React做的一个新闻项目所依赖的包升级到了最新的版本,其中从react-router(2.8.1)升级到react-router(4.1.2)中出现了很多问题, 故总结一下在升级过程中遇到的问题. 二.react-router,V4版本修改内容 1. 所有组件更改为从react-router-dom导入 之前的所有路由组件均是从react-route
令人惊叹的前端路由原理解析和实现方式
腾讯技术工程
10-28 275
在单页应用如此流行的今天，曾经令人惊叹的前端路由已经成为各大框架的基础标配，每个框架都提供了强大的路由功能，导致路由实现变的复杂。想要搞懂路由内部实现还是有些困难的，但是...
简单谈谈React中的路由系统
08-29
`Route`还可以接受`exact`属性，以精确匹配路径，避免子路径的误匹配。 ```jsx <Route path="/home" component={Home} /> ``` 在某些场景下，可能需要对`BrowserRouter`的基路径进行设置，例如在ASP.NET MVC的Area...
reactroute4X测试demo
08-11
在“reactroute4X测试demo”中，你可能会看到如下常见结构： ```jsx import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom'; function App() { return ( <li><Link to="/">...
react-一些react组件如VisibleForEachSwitch
08-15
<Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Route path="/contact" component={Contact} /> ); } ``` 在上述例子中，如果用户访问"/"，则加载`Home`组件；如果...
React router动态加载组件之适配器模式的应用详解
10-18
在React Router的基本配置中，我们通常会直接在`<Route>`组件中指定对应的组件，例如： ```jsx import Center from 'page/center'; import Data from 'page/data'; function App() { return ( <Route exact ...
Route组件
weixin_42260975的博客
03-20 563
react-router之Route组件 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ Route 路由组件(Route)可能是React路由器中最重要的组件，可以帮助您更好地理解和学习使用。它最...
React router 的 Route 中 component 和 render 属性理解
Dust的博客
08-06 2743
React router 的 Route 中 component 和 render 属性理解 Route 标签的三个互斥属性 render、component、children Route 就是用来匹配路由的，并且对匹配到的路由就显示，所以会有可能两个以上的路由会匹配到，所以需要 Switch 标签包围，Switch 可以帮助只渲染匹配到的第一个路由。 一般情况下，Route 推荐使用 children 元素方式配置路由，但是除此之外还有另外三种配置方法。 compnent (属性或者方法)： ren
React 路由详解(超详细详解)
chen4565的博客
07-30 1万+
React React 路由 对SPA的理解 1.单页Web应用（single page web application，SPA）。 2.整个应用只有一个完整的页面。 3.点击页面中的链接不会刷新页面，只会做页面的局部更新。 4.数据都需要通过ajax请求获取, 并在前端异步展现。 路由的理解 1.什么是路由 1.一个路由就是一个映射关系(key:value) 2.key为路径, value可能是function或component 2.路由分类 1.后端路由： 1)理解： value是fun
react嵌套路由以及exact属性用法
黑星
01-29 7403
序言 关于react的路由，与结合vue-router对比，实际上配置更复杂，虽然有各种轻量级框架对react-router进行封装，单还需了解基本原理，废话不多说，上代码 路由 我这里采用es6的写法，与官文相比，使用有状态的react组件实现嵌套路由,首先搭建好环境，我这里利用create-react-app脚手架工具，不知道的同学请看参考文档，搭建好的项目结构如下 引入react-rout...
react-router中exact的作用
qq_42339350的博客
12-25 3232
作用 精准匹配 如果不写的话 <Switch> <Route path='/' component={InitHome}/> <Route path='/about' component={About}/> <Route path='/home'component={Home}/> </Switch> 那么path='/'也会匹配'/about'和'/home'导致的结果就是下面两个路由就没用了 path='/' path=
react路由补充部分（exact、八个路由示例）
热门推荐
mapbar_front的博客
06-01 2万+
1、exact exact是Route下的一条属性，一般而言，react路由会匹配所有匹配到的路由组价，exact能够使得路由的匹配更严格一些。exact的值为bool型，为true是表示严格匹配，为false时为正常匹配。如在exact为true时，’/link’与’/’是不匹配的，但是在false的情况下它们又是匹配的。一个常用的场景是这样的：<Route path='/' component
react-tips2: route 的exact参数的设置问题
cvper's world !
02-18 1768
  使用 react-router-dom 中的 &lt;Route&gt; 组件，这个组件有个参数  exact , 下面举个例子, &lt;Route path="/" component={Home} /&gt; &lt;Route path="/introduce" component={Introduce} /&gt; &lt;Route path="/detail"
react路由中的exact
07-16
exact 是一个用来精确匹配路由的属性，它可以应用在 Route 组件上。 在 React 路由中，当我们定义多个路由时，路由的匹配是基于前缀匹配的，默认情况下，如果一个路由的 path 是另一个路由的前缀，那么这个路由也会被匹配到。 例如，如果有以下两个路由定义： ```jsx <Route path="/about" component={About} /> <Route path="/about/team" component={Team} /> ``` 如果没有使用 exact 属性，当访问 "/about/team" 时，不仅会匹配到 "/about/team" 路由，也会匹配到 "/about" 路由。 但是，如果我们在 "/about" 路由上使用了 exact 属性： ```jsx <Route exact path="/about" component={About} /> ``` 那么只有当访问的路径与该路由的 path 完全匹配时才会渲染该组件。也就是说，只有当访问 "/about" 时才会匹配到这个路由，而不会匹配到 "/about/team"。 使用 exact 属性可以确保只有在路径完全匹配时才会渲染对应的组件，避免了多个路由之间的重叠匹配。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值