【每日一题】React-Router路由切换配置
前端印记
共 1687字,需浏览 4分钟
· 2021-09-22
人生苦短,总需要一点仪式感。比如学前端~
使用<Route>
组件
路由匹配是通过比较<Route>
的 path 属性和当前地址的 pathname 来实现的。当一个<Route>
匹配成功的时候,它将渲染其内容,当他不匹配的时候就会渲染 null。没有路径的<Route>
将始终被匹配。
// when location = { pathname: '/about' }
<Route path='/about' component={About}/>
<Route path='/contact' component={Contact}/>
<Route component={Always}/>
结合使用<Switch>
组件和<Route>
组件
<Switch>
用于将<Route>
分组
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
<Switch>
不是分组<Route>
所必须的,但他通常很有用。一个<Switch>
会遍历其所有的子<Route>
元素,并渲染与当前地址匹配的第一个元素。
使用<Link>、<NavLink>、<Redirect>
组件
<Link>
组件来在你的应用程序中创建链接,无论你在何处渲染一个<Link>
,都会在应用程序的 HTML 中渲染锚a
标签
<Link to="/">Home</Link>
//相等于 <a href='/'>Home</a>
<Navlink>是一个特殊类型的<Link>,当它的 to 属性与当前地址匹配的时候,可以将其定义为"活跃的"
// location = { pathname: '/react' }
<NavLink to="/react" activeClassName="active">
React
</NavLink>
// <a href='/react' className='active'>React</a>
当你想强制导航时,你可以渲染一个<Redirect>
。当一个<Redirect>
渲染的时候,将会使用它的to
属性进行定向。
所有《每日一题》的 知识大纲索引脑图 整理在此:https://www.yuque.com/dfe_evernote/interview/everyday
你也可以点击文末的 “阅读原文” 快速跳转
让我们一起携手同走前端路!
关注公众号回复【加群】即可
评论
面试官:谈谈前端路由的实现原理【hash&history】
哈喽,大家好我是考拉🐨。今天我们来聊一聊前端路由。当谈到前端路由时,指的是在前端应用中管理页面导航和URL的机制。前端路由使得单页应用(Single-Page Application,SPA)能够在用户与应用交互时动态地加载不同的视图,而无需每次都重新加载整个页面。在前端开发中,常用的前端路由库有很
程序员成长指北
586
从理解路由到实现一套Router(路由)
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群平时在Vue项目中经常用到路由,但是也仅仅处于会用的层面,很多基础知识并不是真正的理解。于是就趁着十一”小长假“查阅了很多资料,总结下路由相关的知识
程序员成长指北
347
LangChain:安装与环境配置
使用以下命令安装 LangChain:pip install langchain或者:conda install langchain -c conda-forge环境设定使用LangChain通常需要与一个或多个模型提供程序、数据存储、 A
Python之王
0
Linux 配置和管理网络接口的基本命令
更多Python学习内容:ipengtao.com在Linux系统中,网络接口的配置和管理是系统管理员日常工作的一部分。了解如何有效地使用命令行工具进行网络接口配置是至关重要的。本文将详细介绍一些基本的Linux网络接口管理命令,提供详实的示例代码,帮助管理员更全面地了解和掌握这些工具。ifconf
良许Linux
0
网络工程案例:某学校机房项目交换机的配置
一、学校项目配置案例某校计算机系承办市中考电脑阅卷任务,市教育局要求学校提供四百台电脑供改卷教师使用,同时需要4台配置性能较高的服务器以供四百台客户端电脑访问。该校计算机系四百台电脑分布在7间机房中,共由4个IP网段组成。一、要求:为了安全起见,要求处在4个网段的电脑相互之间不能访问,但所有的电脑均
数据中心运维管理
10
你必须知道的Linux系统安全配置
一:共享账号检查配置名称:用户账号分配检查,避免共享账号存在配置要求:1、系统需按照实际用户分配账号; 2、避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号共享。操作指南:参考配置操作:cat /etc/passwd查看当前所有用户的情况;检查方法:命令cat /etc
开源Linux
1143
腾讯云 4.8 故障原因曝光:因 API 新版本兼容性不够和配置数据灰度机制不足
2024 年 4 月 8 日 15 点 23 分,腾讯云团队收到告警信息,云 API 服务处于异常状态;随即在腾讯云工单、售后服务群以及微博等渠道开始大量出现腾讯云控制台登录不上的客户反馈。经过故障定位发现,客户登录不上控制台正是由云 API 异常所导致。云 API 是云上统一的开放接口集合,客户可
开源Linux
10
你必须知道的Linux系统安全配置
一:共享账号检查配置名称:用户账号分配检查,避免共享账号存在配置要求:1、系统需按照实际用户分配账号; 2、避免不同用户间共享账号,避免用户账号和服务器间通信使用的账号共享。操作指南:参考配置操作:cat /...
马哥Linux运维
0