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配置路由路径中将创建实例的函数导入、替换即可)
相关推荐
linux_cfan几秒前
Chrome 彻底封杀 Flash 后,安防监控如何实现 RTSP 流无插件播放?(2026解决方案)
javascript·安全·实时音视频·html5
知识分享小能手20 分钟前
SQL Server 2019入门学习教程,从入门到精通,SQL Server 2019 存储过程与自定义函数 — 语法知识点及使用方法详解(15)
数据库·学习·sqlserver
强子感冒了21 分钟前
Javascript学习笔记:BOM和DOM
javascript·笔记·学习
容沁风30 分钟前
react路由Cannot GET错误
前端·react.js·前端框架·sharp7
Never_Satisfied37 分钟前
在c#中,抛出异常,并指定其message的值
java·javascript·c#
Highcharts.js42 分钟前
什么是散点图?一文学会Highcharts散点图的核心特性与3D扩展应用
javascript·3d·开发文档·散点图·highcharts·图表类型
2501_9011478344 分钟前
学习笔记|LeetCode 739 每日温度:从暴力枚举到单调栈线性最优解
笔记·学习·leetcode
爱编程的Zion1 小时前
小白AI学习笔记---第一章,如何正确使用
人工智能·笔记·学习
Gary Studio1 小时前
rtos入门问题
学习
我命由我123451 小时前
Photoshop - Photoshop 工具栏(64)计数工具
学习·职场和发展·求职招聘·职场发展·课程设计·学习方法·photoshop