React - Router的基本使用介绍
文章目录
- Router的基本使用介绍
- 认识React-Router
- Router的组件API
- Router的映射配置
- Router配置和跳转
- Navigate组件使用
- Not Found页面配置
Router的基本使用介绍
认识React-Router
目前前端流行的三大框架, 都有自己的路由实现:
Angular的ngRouter
React的ReactRouter
Vue的vue-router
React Router在最近两年版本更新的较快,并且在最新的React Router6.x版本中发生了较大的变化。
目前React Router6.x已经非常稳定,我们可以放心的使用;
说明一下, Router4.x和Router5.x的区别是不大的, 而Router6.x就有些区别, 所以Router系列的文章主要针对Router6.x进行讲解, 当有与4或5版本不同的地方时会单独强调
安装React Router:
安装时,我们选择安装react-router-dom,
npm install react-router-dom
;因为react-router会包含一些react-native的内容,web开发并不需要;
Router的组件API
react-router最主要的API是给我们提供的一些组件:
BrowserRouter或HashRouter
Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件;
BrowserRouter使用history模式;
import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import App from "./App"const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<BrowserRouter><App/></BrowserRouter>
)
HashRouter使用hash模式
import React from "react"
import ReactDOM from "react-dom/client"
import { HashRouter } from "react-router-dom"
import App from "./App"const root = ReactDOM.createRoot(document.querySelector("#root"))root.render(<HashRouter><App/></HashRouter>
)
Router的映射配置
Routes:包裹所有的Route,在其中匹配一个路由
Router6.x使用的是Routes组件
Router5.x使用的是Switch组件
Route:Route用于路径的匹配;
Router6.x不允许Router组件单独存在
path属性: 用于设置匹配到的路径;
element属性: 设置匹配到路径后,渲染的组件;
- Router5.x使用的是component属性
exact: 精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件;
- Router6.x不再支持该属性
<div className='app'><div className='header'>header</div><div className='counter'><Routes><Route path='/' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/></Routes></div><div className='footer'>footer</div>
</div>
Router配置和跳转
Link组件
:
通常路径的跳转是使用Link组件,这个组件最终会被渲染成a元素;
NavLink是在Link基础之上增加了一些样式属性(后续会讲解);
to属性: Link中最重要的属性,用于设置跳转到的路径
例如实现上面代码, 我们在header中实现点击按钮切换页面的效果
<div className='app'><div className='header'><Link to="/">首页</Link><Link to="/about">关于</Link><Link to="/profile">我的</Link></div><div className='counter'><Routes><Route path='/' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/></Routes></div><div className='footer'>footer</div>
</div>
NavLink组件
需求:路径选中时,对应的a元素的文字变为红色
这个时候,我们要使用NavLink组件来替代Link组件, NavLink组件选中时, 有添加一个类(这个组件了解即可, 不如自己控制更方便):
事实上在默认匹配成功时,NavLink就会动态的添加上一个class:
active
, 选中的时候就会添加;所以我们也可以直接编写样式
当然,如果你担心这个class在其他地方被使用了,出现样式的层叠,也可以自定义class和动态添加样式
style属性: 传入一个函数,函数的参数接收一个对象,该对象包含isActive属性
<NavLink to="/" style={({ isActive }) => ({color: isActive ? "red" : ""})}>首页</NavLink> <NavLink to="/about" style={({ isActive }) => ({color: isActive ? "red" : ""})}>关于</NavLink> <NavLink to="/profile" style={({ isActive }) => ({color: isActive ? "red" : ""})}>我的</NavLink>
className:传入一个函数,函数的参数接受一个对象,该对象包含isActive属性
<NavLink to="/" className={({ isActive }) => isActive ? "my-class" : ""}>首页</NavLink> <NavLink to="/about" className={({ isActive }) => isActive ? "my-class" : ""}>关于</NavLink> <NavLink to="/profile" className={({ isActive }) => isActive ? "my-class" : ""}>我的</NavLink>
Navigate组件使用
Navigate用于路由的重定向
,当这个组件出现时,就会执行跳转到对应的to路径中:
我们这里使用这个的一个案例:
用户跳转到Profile界面;
但是在Profile界面有一个isLogin用于记录用户是否登录:
- true: 表示已登录, 跳转到首页;
- false: 表示未登录, 显式登录按钮;
export class Profile extends PureComponent {constructor(props) {super(props)this.state = {isLogin: false}}login() {this.setState({isLogin: true}) }render() {const { isLogin } = this.stateconsole.log(isLogin)return (<div><h2>Profile</h2>{/* 为true时重定向到首页 */}{isLogin ? <Navigate to="/home" /> : <button onClick={() => this.login()}>登录</button>}</div>)}
}
我们也可以在匹配到 “/” 的时候,直接跳转到 “/home” 页面
<Routes>{/* 当默认路径 / 时, 重定向到home页面 */}<Route path='/' element={<Navigate to="/home"/>}></Route><Route path='/home' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/>
</Routes>
Not Found页面配置
如果用户随意输入一个地址,该地址无法匹配,那么在路由匹配的位置将什么内容都不显示。
很多时候,我们希望在这种情况下,让用户看到一个Not Found的页面。
这个过程非常简单:
开发一个Not Found页面;
配置对应的Route,并且设置path为*即可;
<Routes>{/* 当默认路径 / 时, 重定向到home页面 */}<Route path='/' element={<Navigate to="/home"/>}></Route><Route path='/home' element={<Home/>}/><Route path='/about' element={<About/>}/><Route path='/profile' element={<Profile/>}/>{/* 当上面路径都没有匹配到时, 显式Notfound组件 */}<Route path='*' element={<Notfound/>}/>
</Routes>
React - Router的基本使用介绍相关推荐
- hitchhiker部署_Hitchhiker的React Router v4指南:无限远的递归路径!
hitchhiker部署 Welcome to the third part of the Hitchhiker's Guide to React Router v4. In this article ...
- 使用React Router以编程方式导航
通过react-router我可以使用Link元素来创建由react路由器本地处理的链接. 我在内部看到它调用this.context.transitionTo(...) . 我想从下拉列表中进行导航 ...
- 从 React Router 谈谈路由的那些事
React Router 是专为 React 设计的路由解决方案,在使用 React 来开发 SPA (单页应用)项目时,都会需要路由功能,而 React Router 应该是目前使用率最高的. Re ...
- 初探 React Router 4.0
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(引入即用 ...
- React Router 使用教程
真正学会 React 是一个漫长的过程. 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. ...
- hitchhiker部署_《 Hitchhiker的React Router v4指南》:路由配置的隐藏值
hitchhiker部署 Welcome to the Hitchhiker's Guide to React Router v4, Part IV! 欢迎来到< React Router v4 ...
- React Router 学习
本次使用react-router 版本为 5.0.1 本教程前提是你的应用程序是一个web应用程序,使用'react-router-dom'包来实现页面的路由 在React router中有三种类型的 ...
- react更改路由入参_JavaScript基础教程 react router路由传参
本篇教程介绍了JavaScript基础教程 react router路由传参,希望阅读本篇文章以后大家有所收获,帮助大家对JavaScript的理解更加深入. < 今天,我们要讨论的是react ...
- 关于React Router v4的虚张声势指南
In this article, we'll cover the important things you can quickly learn to be informed and confident ...
- react router v4 简介
最近使用react router 遇到一个问题:当对某个路由添加参数的时候/list/:app 这列路由,点击这个路由以后再点击其他路由,location地址就追加到后面,问不是replace. /l ...
最新文章
- 语音识别:市场前景可观,但核心技术仍需突破
- 【笔记】与Android选项卡一周
- 定义python的色条_Python:定义颜色曲线部分
- 口罩告急,全民互助!“口罩互助”小程序重磅上线!
- asp用于取代什么技术_苹果Mini LED晶粒四季度量产,用于新iPad Pro,三安光电或成赢家...
- 中国数据库OceanBase登顶之路
- PHP--字符串合并与分割
- 【安装部署】Linus安装Mysql
- json对象与json字符串互转方法
- JAR包自动启动脚本
- 引入其他字体库 和 字体样式设置
- 西门子840d备份到u盘_840dsl 启动服务U盘制作和CF卡数据备份回装
- python初步学习笔记(上)
- 判断分解的无损连接性和保持函数依赖
- 操作系统 FCFS,SPF,HRRN算法的实现
- 利用python下载视频
- (翻译)社会认同模式(Social proof)
- python升级到3.7版本安装pyaudio
- Go语言使用golang-jwt/jwt/v4进行JWT鉴权
- 电商项目超详细测试点整理(一)
热门文章
- 【PYTHON】利用Python爬取电影网站
- TM4C129建立FREERTOS工程
- 如何解决上传到github上的图片显示不出来的问题
- 【IoT】产品设计:OEM、ODM、EMS 的区别是什么?
- 什么是变量?变量的本质是什么?变量的生命周期和作用域
- php项目代做,代做PHP开发技术程序、php网站代码代写
- B站赴美上市;刘炽平减持100万股腾讯股份;《花花公子》删除官方Facebook账户丨价值早报
- 电脑开热点手机无法连接,无法启用 Internet 连接共享.为 LAN 连接配置的 IP 地址需要使用自动 IP 寻址.
- 游戏辅助,python制作王者荣耀刷金币脚本!
- opencv 阈值处理(python)