【React】路由,Hooks

news2025/1/25 8:56:50

❤️ Author: 老九
☕️ 个人博客:老九的CSDN博客
🙏 个人名言:不可控之事 乐观面对
😍 系列专栏:

文章目录

  • 路由
      • Navigate导航组件
    • 路由的嵌套
    • useNavigate
    • 路由传递参数
    • route配置抽取

路由

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 通过Link组件就可以点击跳转在这里插入图片描述

Navigate导航组件

  • 用于重定向
    在这里插入图片描述

路由的嵌套

  • 在父路由中写link表示跳转到哪,然后需要一个outlet占位符组件
    在这里插入图片描述
    在app.jsx中写route嵌套
    在这里插入图片描述

useNavigate

  • 这是一个hook函数,可以通过这个不局限于link跳转了
    在这里插入图片描述
    如果需要在类组件中用useNavigate,需要通过高阶组件进行拦截封装

路由传递参数

通过动态路由
在这里插入图片描述
然后通过高阶组件实现跳转
在这里插入图片描述
然后通过useParams高阶函数获取到id

在这里插入图片描述

  • 或者传参数的话可以通过querySelectore,使用hook:userLocation()
    在这里插入图片描述
    或者这么写,就可以把每个参数都获取了在这里插入图片描述

route配置抽取

在这里插入图片描述

  • 通过useRoutes的hook实现

在这里插入图片描述

  • 路由懒加载
    在这里插入图片描述
    如果我们对某些组件进行了异步加载(懒加载),那么需要使用Suspense进行包裹
    在这里插入图片描述

————————————————————————
♥♥♥码字不易,大家的支持就是我坚持下去的动力♥♥♥
版权声明:本文为CSDN博主「亚太地区百大最帅面孔第101名」的原创文章

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/639307.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AntDB 事务机制

全局一致性 AntDB 的集群架构包括,一个 GTM(Global Transaction Manager)、多个Coordinator(CN)、多个 Datanode(DN)。其中 GTM 负责给其他的 DN 和CN 分发集群全局唯一的事务号和集群当前判断…

QT--配置Opencv

提示:本文为学习记录,若有疑问,请及时联系作者。 文章目录 前言一、下载已编译的opencv1..解压2..path路径 二、使用步骤1..pro文件2..h文件 总结 前言 只做第一个我,不做第二个谁。 一、下载已编译的opencv 适用于mingw编译器…

如何学习数据结构与算法? - 易智编译EaseEditing

学习和提升数据结构与算法的能力可以通过以下几个步骤: 学习基础知识: 了解数据结构和算法的基本概念和原理,包括常见的数据结构(如数组、链表、栈、队列、树、图等)和算法(如排序、搜索、图算法等&#…

GreenPlum监控工具GPCC部署

📢📢📢📣📣📣 哈喽!大家好,我是【IT邦德】,江湖人称jeames007,10余年DBA及大数据工作经验 一位上进心十足的【大数据领域博主】!😜&am…

Fiddler抓包工具之fiddler的命令行窗口用法

fiddler的命令行窗口的相关命令 在fiddler官网有QuickExec使用教程,地址是http://docs.telerik.com/fiddler/knowledgebase/quickexec QuickExec 命令行窗口位于fiddler左下角黑色输入框,如下图: 按ALT Q,将焦点快速设置到Quic…

initramfs 最全解释与制作

先提几个问题: 0、什么是 initrd 和 initramfs? 概述 现代Linux系统都使用到了一种功能比较特殊的微型系统,作为Linux内核初始化完成但未进入最终系统时的过渡系统,主要的目的是为了将最终系统载入到根文件系统上,辅…

这个618,网工最值得买的路由器/交换机设备

大家好,我是老杨。 有小友最近扎堆冒出来问我,企业要采购路由器/交换机,买啥牌子好,买啥型号好。 又或者是,家里要买家用的路由器/电脑,啥性价比最高? 我真的很想吐槽一句,你们再问…

敏捷软件测试常见的七个误区

敏捷软件开发是从1990年代开始逐渐引起广泛关注的一种新型软件开发方法,是能够应对快速变化的需求的一种软件开发能力,它作为一种新型的开发模式,被越来越多地应用到软件项目中。 敏捷软件测试指的是在敏捷软件开发过程中跟质量相关的一系列…

Appium+Python3环境搭建,其实超简单!

appium可以说是做app最火的一个自动化框架,它的主要优势是支持android和ios,另外脚本语言也是支持java和Python。略懂Python,所以接下来的教程是appiumpython,自己搭建环境的时候,按照某些博客安装遇到各种奇葩问题&am…

【新版】系统架构设计师 - 嵌入式技术

个人总结,仅供参考,欢迎加好友一起讨论 文章目录 架构 - 嵌入式技术考点摘要嵌入式系统嵌入式系统开发与设计交叉开发环境软硬件协同设计嵌入式软件移植低功耗设计 嵌入式硬件嵌入式微处理器人工智能芯片微处理器体系结构 嵌入式操作系统(EOS…

大涨39.9%!连续三季度蝉联全球第三,联想服务器做对了什么?

市场调查公司IDC最新发布的2023年第一季度x86服务器全球市场追踪报告显示,联想集团当季实现了39.9%的大幅增长、市场份额连续三季度蝉联全球第三,而全球排名前五厂商中戴尔下降25.1%、HPE微涨0.6%、浪潮下降38.7%、超微(Super Micro&#xff…

考友经验分享——考研英语怎么答题

(注:我的英语一般,这是其他人的考研英语经验,仅供参考,要早日找到适合自己的方法!) 管卫东老师的《管卫东的考研英语阅读最后冲刺阅读突破——技巧与总结》,觉得收获不小&#xff0…

python工具方法 41 对VOC|YOLO格式的数据进行resize操作

在目标检测中,相比于yolo格式,voc格式和coco格式都使用绝对值描述boxes的size,这在多数据集融合时存在一定的缺陷。尤其是在存在超高清影像中(在数据集中存在超高清影像通常会使dataloader内存不够用,或导致数据加载卡顿),我们不能仅对图像进行resize操作(还需要同时对…

软件测试基础知识必备之浅谈单元测试

什么是单元测试? 单元测试是指,对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作,这里的最小可测试单元通常是指函数或者类。 单元测试都是以自动化的方式执行,所以在大量回归测试的场景下更能带来…

Docker consul的容器

consul服务更新和服务发现 什么是服务注册与发现 服务注册与发现是微服务架构中不可或缺的重要组件。起初服务都是单节点的,不保障高可用性,也不考虑服务的压力承载,服务之间调用单纯的通过接口访问。直到后来出现了多个节点的分布式架构&…

Android Studio实现简单的页面跳转(简单教程)

项目实现:(实现Android Studio 基本有两种实现方式:一种为.MainActivity跳转;第二种是Relatelayout布局跳转。 这里着重介绍第一种:(首先需要建立两个XML文件,进行布局的相互的跳转,然后使用两个JAVA进行相…

一文讲透!实现一个Python+Selenium的自动化测试框架如此简单!

首先你得知道什么是Selenium? Selenium是一个基于浏览器的自动化测试工具,它提供了一种跨平台、跨浏览器的端到端的web自动化解决方案。Selenium主要包括三部分:Selenium IDE、Selenium WebDriver 和Selenium Grid。 Selenium IDE&#xff1…

低代码崛起:会让程序员饭碗不保,人工智能或成其催化剂

人工智能技术目前发展的趋势如何 关于人工智能技术的评价,大众的评价几乎算是较为一致的,都认为其已成为人类有史以来最具革命性的技术之一。当然了,可能目前的我们还是很难想象机器自主决策所产生的影响,但可以肯定的是&#xff…

离散传递函数实现(滤波器实现)

GPT讲挺好: 离散传递函数的一般形式为: G ( z ) b 0 z n b 1 z ( n − 1 ) . . . b n a 0 z n a 1 z ( n − 1 ) . . . a m G(z)\frac{b_0z^n b_1z^{(n-1)} ... b_n}{a_0z^{n} a_1z^{(n-1)} ... a_m} G(z)a0​zna1​z(n−1)...am​b0​znb…

【软件测试/自动化测试】WebDriver+Selenium实现浏览器自动化

目录 前言 使用场景 原理 环境准备 开发 First Script WebDriver API 浏览器 元素 总结 前言 Selenium是一款可以自动化操作浏览器的开源项目,最初的目的是浏览器功能的自动化测试,但是随着项目的发展,人们根据它的特性也用来做一些…