React学习day07-ReactRouter-抽象路由模块、路由导航、路由导航传参、嵌套路由、默认二级路由的设置、两种路由模式

14、ReactRouter续

(2)抽象路由模块

1)新建page文件夹,存放组件

组件内容:

2)新建router文件夹,在其下创建实例
3)实例导入,使用
4)效果

(3)路由导航

1)作用:
实现路由系统中的多个路由之间需要进行路由跳转,并可能在跳转的同时进行传参的需求
2)分类

效果:

②编程式导航

(4)路由导航传参

1)searchParams传参
①传参
②获取参数(先解构,再使用)
2)params传参(传递多个参数,采取同样的步骤)
①在router中,找到需要参数的路径,使用参数名进行占位
②传参
③获取参数(通过使用useParams得到需要的params,params.参数名获取)

(5)嵌套路由

1)概念:
在一级路由中又嵌套了其他路由(比如:嵌套至一级路由内的路由称为二级路由)
2)步骤
①准备一级路由和二级路由组件
②在router中配置路由路径
③使用
④效果

点击链接,进行切换

(6)默认二级路由

1)作用:当访问一级路由时,默认的二级路由也可以得到渲染
2)步骤:
①找到router下的路由路径配置,在二级路由的位置去掉path,设置index属性为true(可以在路径为/时,显示内容)
②在一级路由的组件中修改默认二级路由组件的路径(可以实现路径的正常切换)
③效果

(7)404路由配置(路径找不到时使用)

1)准备404组件
2)在router中配置路径(在路由数组的结尾,以*为path配置路由)
3)效果

(8)两种路由模式

1)history模式(ReactRouter由createBrowerRouter创建)
①底层原理:history对象+pushState事件
②路径显示:不带#
③不需要后端支持
2)hash模式(ReactRouter由createHahRouter创建)
①底层原理:监听hashChange事件
②路径显示:带#
③需要后端支持
3)切换(在router配置路由路径中将创建实例的函数导入、替换即可)
相关推荐
云上艺旅15 分钟前
K8S学习之基础三十:k8s的资源访问方式
学习·云原生·容器·kubernetes
悬炫30 分钟前
深入解析浏览器渲染原理与性能优化策略
前端·javascript
铠文31 分钟前
垃圾回收机制核心知识点
javascript
谦谦橘子33 分钟前
rxjs原理解析
前端·javascript·函数式编程
竺梓君34 分钟前
移动端开发常见问题及解决方案
前端·javascript
getapi39 分钟前
Express.js 是一个轻量级、灵活且功能强大的 Node.js Web 应用框架
前端·javascript·express
l1x1n042 分钟前
HTB 学习笔记 【中/英】《前端 vs. 后端》P3
前端·笔记·学习
dundunmm1 小时前
对比学习(Contrastive Learning)
人工智能·深度学习·学习·算法·数据挖掘·对比学习
手拿菜刀1 小时前
c++学习系列----002.写文件
开发语言·c++·学习
江沉晚呤时1 小时前
C# 建造者模式(Builder Pattern)详细讲解
java·开发语言·javascript·数据库·c#·.netcore·net