04-react基础知识-路由

一、react路由环境安装

使用指令:npm i --save react-router-dom @type/react-router-dom进行react路由环境安装

二、引入路由

在main.jsx文件中引入该语句:

import { createBrowserRouter, RouterProvider } from 'react-router-dom'

定义一个变量router来接收createBrowserRouter(【】)”【】“里面是每个路由 的path(路径),当访问的是path里的路径时,则访问element的组件。

// 使用高阶组件,若要进行页面之间的跳转,必须使用suspense标签将其组件括起来,不然的话会报错嘞!!!

1.最简单的写法

 let router = createBrowserRouter([{
//页面访问的路径path: '/home',
//访问path路径时,页面显示element里的组件element: <div>首页页面</div>},{path: '/user',element: <div>用户页面</div>},{path: '/login',element: <div>登录呀呀呀</div>},])

2.进阶版一:访问相应的path页面,若要跳转到自己封装的组件

需要使用到高阶组件

如代码中load返回的是一个<com/>组件,然后element中使用该高阶组件进行懒加载,引入要访问的组件路径。即可

3.最终版,也是代码比较少的一种写法

import ReactDOM from 'react-dom/client'
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
// 将path传进去
let load = (path) => {// 使用高阶组件,若要进行页面之间的跳转,必须使用suspense标签将其组件括起来,不然的话会报错嘞!!!let Comp = React.lazy(() => import(path))return (<React.Suspense><Comp></Comp></React.Suspense>)
}
let router = createBrowserRouter([{path: '/home',element: load('./component/01-son.jsx')},{path: '/granson',element: load('./component/hook/02-granSon')}])
ReactDOM.createRoot(document.getElementById('root')).render(// 在根组件中使用RouterProvider来提供路由功能<RouterProvider router={router}></RouterProvider>
)

三、页面之间跳转(无参跳转)

1.1Link标签和a标签的区别?

两者都可以链接到网络地址,

前者:当链接到当前项目中的路由的地址的话,不会刷新当前的网址,只是刷新当前的组件

后者:链接到当前项目中的路由的地址的话,刷新的话当前网址会重新加载,页面重新刷新

1.利用link标签进行跳转

//son页面import React, { useState } from 'react'
import { Link } from 'react-router-dom'
function Son() {return (<div><h2>son页面</h2>{/* 使用link进行专拣之间的跳转:减少了页面刷新的次数 */}<Link to='/granson'>跳转到granson页面</Link><br />//link标签跳转的第二种写法:to里面是两个花括号*****************************<Link to={{ pathname: '/granson' }}>跳转</Link><br />{/* a标签也可以实现页面跳转,但页面每次刷新,都会重新加载页面 */}<a href="/granson">a标签跳转</a><br /><Link to='http://www.baidu.com'>link链接到百度地址</Link><br /><a href="'http://www.baidu.com">a链接到百度地址</a></div>)}
export default Son//granson页面import React, { useContext } from 'react'
function Grandson() {return (<div><h5>Grandson页面</h5></div>)
}
export default Grandson

2.用编程式写法进行页面之间的跳转

代码中有编程式写法进行页面跳转的两种方式

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Son() {// 定义一个变量来接收刚刚引进来的函数let router = useNavigate()// 点击按钮router就去匹配相对应的组件进行跳转// 编程式写法的第一种写法=====================================function tiaozhuan() {router('/granson')}// 编程式写法的第二种写法======================================function tiao() {router({ pathname: "/granson" })}return (<div><h2>son页面</h2><button onClick={tiaozhuan}>点击跳转到granson页面</button><br /><br /><button onClick={tiao}>点击跳转到granson页面</button></div>)}
export default Son

四、页面之间跳转(有参跳转)

        1.state传参(常用)

使用编程式写法来进行传参:1.引入useNavitage函数

                                                2.给定一个假的数据obj

                                                3.定义一个变量来接收刚刚引入的useNavitage

                                                4.useNavitage的两个参数:(1:要跳转的页面路径

                                                                                               (2:state是要传递的数据

                                跳转后的页面若要使用从前面传递过来的数据,则需要引入useLocation

                                                5.用一个变量来接收引入的useLocation函数

                                                7.在控制台打印,即可在state里面找到从前面传递过来的数据,并且可以在该页面正常使用。

//son组件中====================================================================import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Son() {let [obj, setobj] = useState([{ id: 1, name: "衣服", price: "125元", comment: "质量挺好好哈" },{ id: 2, name: "裤子", price: "133元", comment: "真棒呀!!" },{ id: 3, name: "鞋子", price: "232元", comment: "不错哦" }])let navigate = useNavigate()console.log(obj);function change(id) {console.log(id);// 使用navigate实现页面跳转,state来进行传递参数,这里是将id传递过去navigate({ pathname: "/granson" }, { state: { id } })}return (<div><h2>son页面</h2><div>{obj.map(el => <div key={el.id}><div>{el.name}</div><div>{el.price}</div><div>{el.comment}</div>{/* 点击button传递相应的参数id传递给change函数 */}<button onClick={() => { change(el.id) }}>点击跳转到granson页面</button></div>)}</div></div>)}
export default Son//granson组件中import React, { useContext } from 'react'
// 1.1在组件页面需要引入uselocation
import { useLocation } from 'react-router-dom'
function Grandson() {//1.2: 用一个变量来接收uselocation函数let obj = useLocation()// 在控制台的state中可以看到从son组件中传递过来的id和obj数据console.log(obj);return (<div><h5>Grandson页面</h5><div>{obj.state.id}</div>{/* 在granson页面可以正常使用 */}<div>{obj.state.obj[0].name}</div></div>)
}
export default Grandson

        2.query传参

                1.引入useNavitage

                2.定义一个变量来接收刚刚引入的useNavitage                

                3.useNavitage的两个参数:(1:要跳转的页面路径

                                                             (2:search是要传递的数据

                 跳转后的页面若要查看从前面传递过来的数据,则需要引入useLocation

                4.用一个变量来接收引入的useLocation函数

                7.在控制台打印,即可在search里面看到到从前面传递过来的数据,但不能直接取出来使用,需要自己去处理后才能正常使用

/son组件中===============================================================================import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Son() {let [obj, setobj] = useState([{ id: 1, name: "衣服", price: "125元", comment: "质量挺好好哈" },{ id: 2, name: "裤子", price: "133元", comment: "真棒呀!!" },{ id: 3, name: "鞋子", price: "232元", comment: "不错哦" }])let navigate = useNavigate()console.log(obj);function change(id) {console.log(id);// 使用navigate实现页面跳转,search来进行传递参数navigate({ pathname: "/granson", search: "id=32&name='衣服'" })}return (<div><h2>son页面</h2><div>{obj.map(el => <div key={el.id}><div>{el.name}</div><div>{el.price}</div><div>{el.comment}</div>{/* 点击button传递相应的参数id传递给change函数 */}<button onClick={() => { change(el.id) }}>点击跳转到granson页面</button></div>)}</div></div>)}
export default Son//granson组件中=====================================================================import React, { useContext } from 'react'
// 1.1在组件页面需要引入uselocation
import { useLocation } from 'react-router-dom'
function Grandson() {//1.2: 用一个变量来接收uselocation函数let obj = useLocation()// 在控制台的state中的search可以看到传递过来的数据,但不能直接使用,需要自己进一步处理后再使用console.log(obj);return (<div><h5>Grandson页面</h5></div>)
}
export default Grandson

state和query传参两者的区别:前者是传递过去了那边直接可以使用,后者是传递过去的数据需要自己进一步处理后才能使用。

        3.动态路由传参

granson路由部分========================================================={path: '/granson/:dt',element: load('./component/hook/02-granSon')}//son组件部分=======================================================================import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
function Son() {let navigate = useNavigate()function change() {// 在后面的控制台中的pathname中可以看到/granson/2023这个数据navigate({ pathname: "/granson/2023" })}return (<div><h2>son页面</h2><button onClick={change}>点击跳转到granson页面</button></div>)
}
export default Son//granson组件组分==========================================================================
import React, { useContext } from 'react'
// 1.1在组件页面需要引入uselocation
import { useLocation } from 'react-router-dom'
function Grandson() {//1.2: 用一个变量来接收uselocation函数let obj = useLocation()console.log(obj);return (<div><h5>Grandson页面</h5></div>)
}
export default Grandson

57行中传递了一个参数。

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

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

相关文章

【Java笔试强训】Day9(CM72 另类加法、HJ91 走方格的方案数)

CM72 另类加法 链接&#xff1a;另类加法 题目&#xff1a; 给定两个int A和B。编写一个函数返回AB的值&#xff0c;但不得使用或其他算数运算符。 题目分析&#xff1a; 代码实现&#xff1a; package Day9;public class Day9_1 {public int addAB(int A, int B) {// wr…

「Verilog学习笔记」使用子模块实现三输入数的大小比较

专栏前言 本专栏的内容主要是记录本人学习Verilog过程中的一些知识点&#xff0c;刷题网站用的是牛客网 分析 题目要求编写子模块实现两个输入数的大小比较并输出较小值&#xff0c;可以使用if-else语句实现。同时要求在主模块中实现三个输入数值的大小比较&#xff0c;假设三个…

【配置】如何在打包Spring Boot项目时按需使用日常、测试、预发、正式环境的配置文件

文章目录 前言1. 创建5个配置文件2. 在pom.xml文件中如下配置3. 在application.properties中加入环境变量 前言 在我们开发项目的时候&#xff0c;一般有四套环境&#xff1a;日常、测试、预发、正式。日常环境作为我们开发环境&#xff1b;测试环境给测试同学测试功能&#x…

AI诈骗的防范与应对:维护数字安全的责任

近年来&#xff0c;人工智能生成内容&#xff08;AIGC&#xff09;技术在各个领域都取得了显著的进展&#xff0c;为我们带来了更多的便捷和创新。然而&#xff0c;与此同时&#xff0c;这项技术也被不法分子滥用&#xff0c;用于实施各种形式的AI诈骗。这种威胁需要我们认真对…

​软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】​

软考-高级-信息系统项目管理师教程 第四版【第21章-项目管理科学基础-思维导图】 课本里章节里所有蓝色字体的思维导图

抽象方法及接口的使用概念

abstract关键字 /* * 类和对象&#xff1a; * 类&#xff1a;一个概念&#xff0c;客观不存在的&#xff0c;或者认为是一个模板。 * 对象&#xff1a;看得见摸得着的真实存在的物体。 * 对象---类的过程&#xff0c;抽象 * 类---对象的过程&#xff0c;叫实例化 * 抽…

oracle查询前几条数据的方法

在Oralce中实现select top N&#xff1a;由于Oracle不支持select top 语句&#xff0c;所以在oracle中经常是用order by 跟rownum的组合来实现select top n的查询。 方法1&#xff1a; SELECT * FROM (SELECT * FROM EMP ORDER BY SAL DESC) WHERE ROWNUM < 5 --抽取处记录…

【elasticsearch+kibana基于windows docker安装】

创建网络&#xff1a;es和kibana容器互联 docker network create es-net加载镜像 docker pull elasticsearch:7.12.1运行 docker run -d --name es -p 9200:9200 -p 9300:9300 -e "discovery.typesingle-node" -e ES_JAVA_OPTS"-Xms512m -Xmx512m" -v $…

uni-app基于vue实现商城小程序

一、前言 参考“网易严选”小程序 项目采用传统vue项目结构&#xff0c;即uni-app打包和运行成小程序&#xff0c;使用HBuilder开发工具开发项目&#xff0c;通过运行启动“微信开发者工具”完成项目启动。 二、功能效果图 1.首页 2.分类 3.活动 4.我的 5.商品详情 6.购物车…

React中组件之间如何通信?

一、是什么 我们将组件间通信可以拆分为两个词&#xff1a; 组件通信 回顾Vue系列的文章&#xff0c;组件是vue中最强大的功能之一&#xff0c;同样组件化是React的核心思想 相比vue&#xff0c;React的组件更加灵活和多样&#xff0c;按照不同的方式可以分成很多类型的组件…

第五届泰迪杯数据分析技能赛B题源码图片分享

需要B题源码以及第六届带队”指导“请私信本人&#xff0c;团队包含技能赛双一等&#xff0c;数学建模省一&#xff0c;泰迪杯挖掘国一&#xff0c;研究生队友。 去年一等作品可视化图如下&#xff0c;私信获取源码

【Ruoyi管理后台】用户登录强制修改密码

近期有个需求&#xff0c;就是需要调整Ruoyi管理后台&#xff1a;用户如果三个月(长时间)未修改过密码&#xff0c;需要在登录时强制修改密码&#xff0c;否则不能登录系统。 一、后端项目调整 从需求来看&#xff0c;我们需要在用户表增加一个字段&#xff0c;用于标记用户最…

【C语言】动态内存管理

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家了解动态内存管理&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 目录 一. 为什么存在动态内存分配二. 动态内存函数的介绍2.1 malloc和free2.2 calloc2.3 real…

Linux/centos上如何配置管理Web服务器?

Linux/centos上如何配置管理Web服务器&#xff1f; 1 Web简单了解2 关于Apache3 如何安装Apache服务器&#xff1f;3.1 Apache服务安装3.2 httpd服务的基本操作 4 如何配置Apache服务器&#xff1f;4.1 关于httpd.conf配置4.2 常用指令 5 简单实例 1 Web简单了解 Web服务器称为…

OpenGL_Learn08(坐标系统)

目录 1. 概述 2. 局部空间 3. 世界空间 4. 观察空间 5. 剪裁空间 6. 初入3D 7. 3D旋转 1. 概述 OpenGL希望在每次顶点着色器运行后&#xff0c;我们可见的所有顶点都为标准化设备坐标(Normalized Device Coordinate, NDC)。也就是说&#xff0c;每个顶点的x&#xff0c;…

[MT8766][Android12] 取消WIFI热点超过10分钟没有连接自动关闭设定

文章目录 开发平台基本信息问题描述解决方法 开发平台基本信息 芯片: MT8766 版本: Android 12 kernel: msm-4.19 问题描述 之前有个需求要设备默认开启WIFI热点&#xff0c;默认开启usb共享网络&#xff1b;而热点在原生的设定里面有个超时机制&#xff0c;如果在限定时间内…

YOLOv7魔改,YOLOv7改进之PPSPPCSPC助力涨点

目录 一、理论部分 网络结构 ​ 二、PPSPPCSPC 代码 应用到YOLOv7/v5 yaml配置文件</

FMCW雷达论文速览 | TRS 2023, 基于FMCW雷达的多天线高精度测距算法及性能分析

注1:本文系“最新论文速览”系列之一,致力于简洁清晰地介绍、解读最新的顶会/顶刊论文 TRS 2023 | High Accuracy Multi-antenna Ranging Algorithm and Performance Analysis for FMCW Radar 论文原文:https://ieeexplore.ieee.org/document/10309162 Z. Xu, S. Qi and P. Zh…

SpringBoot定时任务打成jar 引入到新的项目中后并自动执行

一、springBoot开发定时任务 ①&#xff1a;连接数据库实现新增功能 1. 引入依赖 <dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional> </dependency> <dependen…

网络IO

网络IO 阻塞模型 在之前网络通信都是阻塞模型 客户端向服务端发出请求后&#xff0c;客户端会一直处于等待状态&#xff0c;直到服务器端返回结果或网络出现问题 服务器端也是如此&#xff0c;在处理某个客户端A发来的请求时&#xff0c;另一个客户端B发来的请求会等待&#xf…