位置: IT常识 - 正文

React - Router的基本使用介绍(react_router)

编辑:rootadmin
React - Router的基本使用介绍 文章目录Router的基本使用介绍认识React-RouterRouter的组件APIRouter的映射配置Router配置和跳转Navigate组件使用Not Found页面配置Router的基本使用介绍认识React-Router

推荐整理分享React - Router的基本使用介绍(react_router),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:react router onenter,react router作用,react router prompt,react router withrouter,react router onenter,reactrouter的基本用法,react router withrouter,react router route,内容如对您有帮助,希望把文章链接给更多的朋友!

目前前端流行的三大框架, 都有自己的路由实现:

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属性: 用于设置匹配到的路径;

React - Router的基本使用介绍(react_router)

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.state console.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>
本文链接地址:https://www.jiuchutong.com/zhishi/300455.html 转载请保留说明!

上一篇:结构体全解,适合初学者的一条龙深度讲解(附手绘图详解)(结构体基本知识)

下一篇:猿创征文|信息抽取(2)——pytorch实现Bert-BiLSTM-CRF、Bert-CRF模型进行实体抽取(猿创部落是干什么的)

  • 房产税如何
  • 固定资产累计折旧会计科目
  • 上年城市维护建设税退税怎么记账
  • 劳务公司代发工资合法吗
  • 出售闲置的材料物资
  • 企业促销应该采用什么方法
  • 车辆的鉴定评估方法
  • 事业单位现金收支管理办法
  • 企业转让未入账怎么办
  • 营业外支出计入
  • 资产折旧纳税
  • 预提返利的会计处理
  • 资产减值准备的会计科目
  • 零售汽油费发票需要交印花税吗?
  • 开票方与受票方的区别
  • 核定征收和定期定额的区别
  • 工程质保金扣除
  • 生产成本属于什么会计要素
  • 机票改签费要开发票吗
  • 支票付款的弊端
  • 农业公司的会计分录
  • 如何用腾讯电脑管家回复格式化U盘
  • remind32.exe - remind32是什么进程 有什么用
  • 失控发票受票方的责任
  • 在建工程完工后转入哪里
  • 押金少退侵犯了哪条法律
  • windows为什么从7开始
  • win7网络连接在哪里打开
  • 进口货物怎样报关
  • 个人医疗保险怎么取出来
  • 定向增发后送股成本价
  • 支付厂房租金计入什么科目
  • vue引入echarts柱状图
  • 股息分配方式
  • 头歌java入门运算符和表达式答案
  • 业务招待费个税账务处理办法
  • 全网首发是什么意思
  • 2022年 change detection遥感图像变化检测 论文附代码
  • vmware17虚拟机安装教程
  • 外地预缴城建税税率
  • 给法院交的诉讼费没有发票怎么入账
  • 网上免费学电脑
  • 小规模纳税人的税率是多少
  • 采购的技术服务费会计分录
  • 小规模纳税人差额征收税率是多少
  • 占地面积法如何分摊土地成本
  • 我有朋友吗朋友圈说说
  • sql2008用户sa登录失败
  • 利息收入是一级科目还是
  • 应交税费和应交增值税的关系
  • 用银行存款支付本季度短期借款利息
  • 收到发票了填写什么单据
  • 无奖有票是什么意思
  • 独立核算 单独核算
  • 工业企业应收账款减少原因分析
  • MySQL存储过程和函数有什么区别?
  • microsoft window vista
  • win8.1系统没有wifi怎么办
  • 如何打开mac系统终端
  • mac怎么安装安装包
  • seti@home.exe - seti@home是什么进程 有什么用
  • win10右下角功能列表不见了
  • 怎么禁止电脑qq自动启动
  • WIN7系统如何关掉游戏屏保
  • win7如何显示桌面
  • linux不小心删除目录怎么恢复
  • 如何理解python语言
  • cocos creator3
  • jquery对象可以直接使用dom吗
  • python3正则
  • gradle手动安装
  • jQuery插件是什么
  • jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
  • 增值税发票的发票号码和发票代码
  • 新收入准则租赁业务
  • 领导班子和领导干部政绩观偏差主要问题清单
  • 河南省医保网上报销流程
  • 打印发票需要什么信息
  • 纳税申报的期限是什么意思
  • 建筑业甲方代扣代缴增值税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设