react_13
React Router
//-dom代表给浏览器应用使用的
npm install react-router-dom
-
目前版本是 "react-router-dom": "^6.18.0"
-
使用
新建文件 src/router/MyRouter.tsx
-
import { Navigate, RouteObject, useRoutes } from "react-router-dom"; import { Route } from "../model/Student"; import A8Login from "../pages/A8Login"; import A8Main from "../pages/A8Main"; import A8NotFound from "../pages/A8NotFound"; import { lazy } from "react"; import RoutesStore from "../store/RoutesStore"; import { observer } from "mobx-react-lite"; export function load(name: string) {//lazy方法可以根据字符串获得字符串组件对应着的组件标签const Page = lazy(() => import(`../pages/${name}`));console.log(Page);return <Page></Page>; }function MyRouter() {console.log(RoutesStore.routes)const router = useRoutes(RoutesStore.routes);return router; } //注意导入 router 对象时,用 observer 做了包装,这样能够在 store 发生变化时重建 router 对象 export default observer(MyRouter)index.tsx 修改为
-
import ReactDOM from "react-dom/client"; import "./index.css";import reportWebVitals from "./reportWebVitals";import { ConfigProvider } from "antd"; import zhCN from "antd/es/locale/zh_CN";import MyRouter from "./router/MyRouter"; import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement );root.render(<ConfigProvider locale={zhCN}><BrowserRouter><MyRouter></MyRouter></BrowserRouter></ConfigProvider> );// If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();A8Main 的代码
-
import {DownCircleOutlined,MenuFoldOutlined,VerticalAlignTopOutlined, } from "@ant-design/icons"; import { Button, Layout, Menu } from "antd"; import { ItemType } from "antd/es/menu/hooks/useItems"; import { Link, Navigate, Outlet, useNavigate } from "react-router-dom"; import Icon from "../store/Icon"; import StudentStore from "../store/StudentStore"; import RoutesStore from "../store/RoutesStore"; import { observer } from "mobx-react-lite"; import { useEffect } from "react";function A8Main() {const items: ItemType[] = [{label: <Link to="/student">学生管理</Link>,key: 1,icon: <DownCircleOutlined />,},{label: <Link to="/teacher">教师管理</Link>,key: 2,icon: <VerticalAlignTopOutlined />,},{label: "用户管理",key: 3,icon: <MenuFoldOutlined />,children: [{label: "功能一",key: 31,icon: <Icon name="PicLeftOutlined"></Icon>,},{label: "功能二",key: 32,icon: <Icon name="BorderHorizontalOutlined"></Icon>,},],},];const nav = useNavigate();//点击注销按钮,清空localStorage里面和state数据,跳转到登录页面function onClick() {RoutesStore.reset();nav("/login");}//useEffect()的执行时机是先生成了jsx代表,然后执行了副作用,然后再渲染,正在渲染的时候执行了跳转,所以看到//主页一闪而过,/* useEffect(() => {if (RoutesStore.username === "") {nav("/login");}}, []); */if (RoutesStore.username === "") {return <Navigate to={"/login"}></Navigate>;}return (<Layout><Layout.Header><span>欢迎您【{RoutesStore.username}】</span><Button onClick={onClick}>注销</Button></Layout.Header><Layout><Layout.Sider><Menu items={RoutesStore.menus} theme="dark" mode="inline"></Menu></Layout.Sider><Layout.Content><Outlet></Outlet></Layout.Content></Layout></Layout>); } export default observer(A8Main); -
Navigate 的作用是重定向
-
load 方法的作用是懒加载组件,更重要的是根据字符串找到真正的组件,这是动态路由所需要的
-
children 来进行嵌套路由映射,嵌套路由在跳转后,并不是替换整个页面,而是用新页面替换父页面的 Outlet 部分
相关文章:
react_13
React Router //-dom代表给浏览器应用使用的 npm install react-router-dom 目前版本是 "react-router-dom": "^6.18.0" 使用 新建文件 src/router/MyRouter.tsx import { Navigate, RouteObject, useRoutes } from "react-router-dom"; imp…...
vscode git提交
...
LangChain+LLM实战---实用Prompt工程讲解
原文:Practical Prompt Engineering 注:本文中,提示和prompt几乎是等效的。 这是一篇非常全面介绍Prompt的文章,包括prompt作用于大模型的一些内在机制,和prompt可以如何对大模型进行“微调”。讲清楚了我们常常听到的…...
虚拟机备份中的CBT技术
虚拟机备份的CBT( Changed Block Tracking)模式是一种备份模式,它能够识别和跟踪自上次备份后虚拟机中被修改过的块,这些修改会被存放到日志文件中。在启用CBT模式之后,备份软件会利用这个功能进行增量备份。 启用CBT…...
云服务器哪家便宜靠谱 | 简单了解亚马逊云科技发展史
云服务器哪家便宜又靠谱呢?为什么说亚马逊云科技在这道题答案的第一行,一篇故事告诉你。 1994年,杰夫贝索斯在西雅图创建了亚马逊,最初只是一个在线书店。 1997年,亚马逊在纳斯达克交易所上市,成为一家公…...
【LeetCode】每日一题 2023_11_6 最大单词长度乘积
文章目录 刷题前唠嗑题目:最大单词长度乘积题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动!!! 题目:最大单词长度乘积 题目链接:318. 最大单词长度乘积 题目描述 代码与解题思路…...
【小白专用】PHP中的JSON转换操作指南 23.11.06
一、JSON的基础知识 1.1JSON数据格式 JSON数据格式是一组键值对的集合,通过逗号分隔。键值对由“键”和“值”组成,中间使用冒号分隔。JSON数据格式可以嵌套,而且可以使用数组 二、PHP中的JSON函数 JSON的操作需要使用编程语言进行处理&am…...
Web3游戏的十字路口:沿用传统IP还是另起炉灶?
人们经常问我对 Web3 游戏有什么看法。因此,我想以书面形式概述一下我目前的想法。 让我先澄清一下:我不是专家。这不是一篇深入探讨游戏世界精细指标如 MAU 或 D14 等的全面分析。请把这看作是我根据个人交流和研究,这反映我在游戏领域关注…...
【系统架构设计】架构核心知识:4 系统可靠性分析与设计
目录 1 可靠性 2 系统可靠性 2.1 可靠性指标 2.2 可靠性计算 2.2.1 串联系统 2.2.2 并联系统</...
什么是站群服务器的优点?
什么是站群服务器的优点? 1. 主要作用 在网站数量增多的今天,对于站群服务器的需求自然也会变得越来越多,那么,它的主要作用都是什么呢?站群服务器,就好像它的名字一样,是一个群体,…...
图数据库Neo4j——SpringBoot使用Neo4j 简单增删改查 复杂查询初步
前言 图形数据库是专门用于存储图形数据的数据库,它使用图形模型来存储数据,并且支持复杂的图形查询。常见的图形数据库有Neo4j、OrientDB等。 Neo4j是用Java实现的开源NoSQL图数据库,本篇博客介绍如何在SpringBoot中使用Neo4j图数据库&…...
-- Could NOT find livox_ros_driver (missing: livox_ros_driver_DIR)
原因 缺少livox_ros_driver 包 解决办法如下 livox_ros_driver 地址 https://github.com/Livox-SDK/livox_ros_driver 下载下来放入ros的工作目录...
山东餐饮类行业可以办理那些认证?
在招投标中很多企业会因为缺少一些证书从而丢失加分项,所以很多行业都会关注那些针对性比较强的企业认证,今天就来讲一下餐饮类行业招投标有哪些证书可以帮助企业中标? 一、ISO三体系认证 ISO9001 质量管理体系 质量是取得成功的关键。由…...
【抖音自动评论的软件】评论888无偿分享,和其开发技术与开发流程的分享
先来看成果,↑↑需要的同学可看我名字↖↖↖↖↖,或评论888无偿分享 短视频作为互联网时代的重要产物,已经成为人们生活中不可或缺的一部分。那么,如何通过短视频平台进行有效的运营和评论呢?本文将为您详细解析。 一…...
挑战100天 AI In LeetCode Day02(2)
挑战100天 AI In LeetCode Day02(2) 一、LeetCode介绍二、LeetCode 热题 HOT 100-42.1 题目2.2 题解 三、面试经典 150 题-43.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站,提供各种算法和数据结构的题目,面向程序…...
《尚医通》Vue3 项目+TypeScript 前端项目(持续更新,附带源码)
尚硅谷vue项目实战《尚医通》,Vue3项目TypeScript前端项目_哔哩哔哩_bilibili尚硅谷vue项目实战《尚医通》,Vue3项目TypeScript前端项目共计71条视频,包括:001_开篇介绍、002_尚医通项目的简介、003_Vite构建化工具初始化项目等&a…...
仪表盘 gauge
option {tooltip: {formatter: {a} <br/>{b} : {c}%},series: [{name: Pressure,type: gauge,startAngle: 225, // 起始角度,同极坐标endAngle: -45, // 终止角度,同极坐标// axisLine: {// //坐标轴轴线// show: false// },// splitLine: {//…...
常见面试题-MySQL专栏(三)MVCC、BufferPool
typora-copy-images-to: imgs 了解 MVCC 吗? 答: MVCC(Multi-Version Concurrency Control) 是用来保证 MySQL 的事务隔离性的,对一行数据的读和写两个操作默认是不会通过加锁互斥来保证隔离性,避免了频…...
CDN加速:国内外价格与企业云服务最佳搭配方案
随着互联网的快速发展,CDN(内容分发网络)已经成为了企业提供高质量、高速度内容传递的不可或缺的工具。CDN通过将内容分发到离用户更近的服务器上,提高了网站性能,减少了加载时间,改善了用户体验。在本文中…...
uni-app小程序使用vant
步骤一:安装 Vant Weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production步骤二:在根目录下创建“wxcomponents”文件夹 步骤三:找…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
Python爬虫实战:研究feedparser库相关技术
1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...
【AI学习】三、AI算法中的向量
在人工智能(AI)算法中,向量(Vector)是一种将现实世界中的数据(如图像、文本、音频等)转化为计算机可处理的数值型特征表示的工具。它是连接人类认知(如语义、视觉特征)与…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...
STM32HAL库USART源代码解析及应用
STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement
Cilium动手实验室: 精通之旅---13.Cilium LoadBalancer IPAM and L2 Service Announcement 1. LAB环境2. L2公告策略2.1 部署Death Star2.2 访问服务2.3 部署L2公告策略2.4 服务宣告 3. 可视化 ARP 流量3.1 部署新服务3.2 准备可视化3.3 再次请求 4. 自动IPAM4.1 IPAM Pool4.2 …...
