当前位置: 首页 > news >正文

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工程讲解

原文&#xff1a;Practical Prompt Engineering 注&#xff1a;本文中&#xff0c;提示和prompt几乎是等效的。 这是一篇非常全面介绍Prompt的文章&#xff0c;包括prompt作用于大模型的一些内在机制&#xff0c;和prompt可以如何对大模型进行“微调”。讲清楚了我们常常听到的…...

虚拟机备份中的CBT技术

虚拟机备份的CBT&#xff08; Changed Block Tracking&#xff09;模式是一种备份模式&#xff0c;它能够识别和跟踪自上次备份后虚拟机中被修改过的块&#xff0c;这些修改会被存放到日志文件中。在启用CBT模式之后&#xff0c;备份软件会利用这个功能进行增量备份。 启用CBT…...

云服务器哪家便宜靠谱 | 简单了解亚马逊云科技发展史

云服务器哪家便宜又靠谱呢&#xff1f;为什么说亚马逊云科技在这道题答案的第一行&#xff0c;一篇故事告诉你。 1994年&#xff0c;杰夫贝索斯在西雅图创建了亚马逊&#xff0c;最初只是一个在线书店。 1997年&#xff0c;亚马逊在纳斯达克交易所上市&#xff0c;成为一家公…...

【LeetCode】每日一题 2023_11_6 最大单词长度乘积

文章目录 刷题前唠嗑题目&#xff1a;最大单词长度乘积题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 题目&#xff1a;最大单词长度乘积 题目链接&#xff1a;318. 最大单词长度乘积 题目描述 代码与解题思路…...

【小白专用】PHP中的JSON转换操作指南 23.11.06

一、JSON的基础知识 1.1JSON数据格式 JSON数据格式是一组键值对的集合&#xff0c;通过逗号分隔。键值对由“键”和“值”组成&#xff0c;中间使用冒号分隔。JSON数据格式可以嵌套&#xff0c;而且可以使用数组 二、PHP中的JSON函数 JSON的操作需要使用编程语言进行处理&am…...

Web3游戏的十字路口:沿用传统IP还是另起炉灶?

人们经常问我对 Web3 游戏有什么看法。因此&#xff0c;我想以书面形式概述一下我目前的想法。 让我先澄清一下&#xff1a;我不是专家。这不是一篇深入探讨游戏世界精细指标如 MAU 或 D14 等的全面分析。请把这看作是我根据个人交流和研究&#xff0c;这反映我在游戏领域关注…...

【系统架构设计】架构核心知识:4 系统可靠性分析与设计

目录 1 可靠性 2 系统可靠性 2.1 可靠性指标 2.2 可靠性计算 2.2.1 串联系统 2.2.2 并联系统</...

什么是站群服务器的优点?

什么是站群服务器的优点&#xff1f; 1. 主要作用 在网站数量增多的今天&#xff0c;对于站群服务器的需求自然也会变得越来越多&#xff0c;那么&#xff0c;它的主要作用都是什么呢&#xff1f;站群服务器&#xff0c;就好像它的名字一样&#xff0c;是一个群体&#xff0c…...

图数据库Neo4j——SpringBoot使用Neo4j 简单增删改查 复杂查询初步

前言 图形数据库是专门用于存储图形数据的数据库&#xff0c;它使用图形模型来存储数据&#xff0c;并且支持复杂的图形查询。常见的图形数据库有Neo4j、OrientDB等。 Neo4j是用Java实现的开源NoSQL图数据库&#xff0c;本篇博客介绍如何在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的工作目录...

山东餐饮类行业可以办理那些认证?

在招投标中很多企业会因为缺少一些证书从而丢失加分项&#xff0c;所以很多行业都会关注那些针对性比较强的企业认证&#xff0c;今天就来讲一下餐饮类行业招投标有哪些证书可以帮助企业中标&#xff1f; 一、ISO三体系认证 ISO9001 质量管理体系 质量是取得成功的关键。由…...

【抖音自动评论的软件】评论888无偿分享,和其开发技术与开发流程的分享

先来看成果&#xff0c;↑↑需要的同学可看我名字↖↖↖↖↖&#xff0c;或评论888无偿分享 短视频作为互联网时代的重要产物&#xff0c;已经成为人们生活中不可或缺的一部分。那么&#xff0c;如何通过短视频平台进行有效的运营和评论呢&#xff1f;本文将为您详细解析。 一…...

挑战100天 AI In LeetCode Day02(2)

挑战100天 AI In LeetCode Day02&#xff08;2&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-42.1 题目2.2 题解 三、面试经典 150 题-43.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&#xff0c;面向程序…...

《尚医通》Vue3 项目+TypeScript 前端项目(持续更新,附带源码)

尚硅谷vue项目实战《尚医通》&#xff0c;Vue3项目TypeScript前端项目_哔哩哔哩_bilibili尚硅谷vue项目实战《尚医通》&#xff0c;Vue3项目TypeScript前端项目共计71条视频&#xff0c;包括&#xff1a;001_开篇介绍、002_尚医通项目的简介、003_Vite构建化工具初始化项目等&a…...

仪表盘 gauge

option {tooltip: {formatter: {a} <br/>{b} : {c}%},series: [{name: Pressure,type: gauge,startAngle: 225, // 起始角度&#xff0c;同极坐标endAngle: -45, // 终止角度&#xff0c;同极坐标// axisLine: {// //坐标轴轴线// show: false// },// splitLine: {//…...

常见面试题-MySQL专栏(三)MVCC、BufferPool

typora-copy-images-to: imgs 了解 MVCC 吗&#xff1f; 答&#xff1a; MVCC&#xff08;Multi-Version Concurrency Control&#xff09; 是用来保证 MySQL 的事务隔离性的&#xff0c;对一行数据的读和写两个操作默认是不会通过加锁互斥来保证隔离性&#xff0c;避免了频…...

CDN加速:国内外价格与企业云服务最佳搭配方案

随着互联网的快速发展&#xff0c;CDN&#xff08;内容分发网络&#xff09;已经成为了企业提供高质量、高速度内容传递的不可或缺的工具。CDN通过将内容分发到离用户更近的服务器上&#xff0c;提高了网站性能&#xff0c;减少了加载时间&#xff0c;改善了用户体验。在本文中…...

uni-app小程序使用vant

步骤一&#xff1a;安装 Vant Weapp # 通过 npm 安装 npm i vant/weapp -S --production# 通过 yarn 安装 yarn add vant/weapp --production# 安装 0.x 版本 npm i vant-weapp -S --production步骤二&#xff1a;在根目录下创建“wxcomponents”文件夹 步骤三&#xff1a;找…...

8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂

蛋白质结合剂&#xff08;如抗体、抑制肽&#xff09;在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上&#xff0c;高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术&#xff0c;但这类方法普遍面临资源消耗巨大、研发周期冗长…...

P3 QT项目----记事本(3.8)

3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...

DIY|Mac 搭建 ESP-IDF 开发环境及编译小智 AI

前一阵子在百度 AI 开发者大会上&#xff0c;看到基于小智 AI DIY 玩具的演示&#xff0c;感觉有点意思&#xff0c;想着自己也来试试。 如果只是想烧录现成的固件&#xff0c;乐鑫官方除了提供了 Windows 版本的 Flash 下载工具 之外&#xff0c;还提供了基于网页版的 ESP LA…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

Sklearn 机器学习 缺失值处理 获取填充失值的统计值

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 使用 Scikit-learn 处理缺失值并提取填充统计信息的完整指南 在机器学习项目中,数据清…...

CSS 工具对比:UnoCSS vs Tailwind CSS,谁是你的菜?

在现代前端开发中&#xff0c;Utility-First (功能优先) CSS 框架已经成为主流。其中&#xff0c;Tailwind CSS 无疑是市场的领导者和标杆。然而&#xff0c;一个名为 UnoCSS 的新星正以其惊人的性能和极致的灵活性迅速崛起。 这篇文章将深入探讨这两款工具的核心理念、技术差…...

若依项目部署--传统架构--未完待续

若依项目介绍 项目源码获取 #Git工具下载 dnf -y install git #若依项目获取 git clone https://gitee.com/y_project/RuoYi-Vue.git项目背景 随着企业信息化需求的增加&#xff0c;传统开发模式存在效率低&#xff0c;重复劳动多等问题。若依项目通过整合主流技术框架&…...

十二、【ESP32全栈开发指南: IDF开发环境下cJSON使用】

一、JSON简介 JSON&#xff08;JavaScript Object Notation&#xff09;是一种轻量级的数据交换格式&#xff0c;具有以下核心特性&#xff1a; 完全独立于编程语言的文本格式易于人阅读和编写易于机器解析和生成基于ECMAScript标准子集 1.1 JSON语法规则 {"name"…...

Yolo11改进策略:Block改进|FCM,特征互补映射模块|AAAI 2025|即插即用

1 论文信息 FBRT-YOLO&#xff08;Faster and Better for Real-Time Aerial Image Detection&#xff09;是由北京理工大学团队提出的专用于航拍图像实时目标检测的创新框架&#xff0c;发表于AAAI 2025。论文针对航拍场景中小目标检测的核心难题展开研究&#xff0c;重点解决…...