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 部分

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

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

相关文章

JAVA整理学习实例(二)Object类

JAVA整理学习实例&#xff08;二&#xff09;Object类 注&#xff1a;整理一下之前写的东西&#xff0c;然后在修修补补&#xff0c;水平有限&#xff0c;有错误的请指正。 前言 如果面试没有遇到问Object类的面试题&#xff0c;那真是一种遗憾。 一、关于Java Object的方法 解…

基于LDA主题+协同过滤+矩阵分解算法的智能电影推荐系统——机器学习算法应用(含python、JavaScript工程源码)+MovieLens数据集(三)

目录 前言总体设计系统整体结构图系统流程图 运行环境模块实现1. 数据爬取及处理2. 模型训练及保存1&#xff09;协同过滤2&#xff09;矩阵分解3&#xff09;LDA主题模型 3. 接口实现1&#xff09;流行电影推荐2&#xff09;相邻用户推荐3&#xff09;相似内容推荐 相关其它博…

ubuntu 20.04 + cuda-11.8 + cudnn-8.6+TensorRT-8.6

1、装显卡驱动 ubuntu20.04 cuda10.0 cudnn7.6.4_我是谁&#xff1f;&#xff1f;的博客-CSDN博客 查看支持的驱动版本&#xff1a; 查看本机显卡能够配置的驱动信息 luhost:/usr/local$ ubuntu-drivers devices/sys/devices/pci0000:00/0000:00:01.0/0000:01:00.0 moda…

LeetCode | 203. 移除链表元素

LeetCode | 203. 移除链表元素 OJ链接 这里有两个思路我接下来看 当cur不等于6就一直找&#xff0c;找到了6就删除&#xff0c;但是能不能直接删除&#xff1f;不能&#xff0c;直接free了就找不到下一个了 这个时候我们就要定义next指针&#xff0c;和prev指针&#xff0c…

必须收藏:IPv6核心知识梳理!!(原理+基础配置)

一、概述 由于NAT技术的应用&#xff0c;缓解了IPv4地址不足产生的问题&#xff0c;但是部署IPv6是解决IPv4地址不足的最终方案。当前世界上不同地区对部署IPv6的需求强烈程度不一&#xff0c;且当前IPv4网络仍然占主流地位&#xff0c;因此短时间内IPv6和IPv4将会共存。 IPv4网…

【Midjourney入门教程3】写好prompt常用的参数

文章目录 1、图片描述词&#xff08;图片链接&#xff09;文字描述词后缀参数2、权重划分3、后缀参数版本选择&#xff1a;--v版本风格&#xff1a;--style长宽比&#xff1a;--ar多样性: --c二次元化&#xff1a;--niji排除内容&#xff1a;--no--stylize--seed--tile、--q 4、…

Spring Data Redis + RabbitMQ - 基于 string + hash 实现缓存,计数(高内聚)

目录 一、Spring Data Redis 1.1、缓存功能(分析) 1.2、案例实现 一、Spring Data Redis 1.1、缓存功能(分析) hash 类型存储缓存相比于 string 类型就有更多的更合适的使用场景. 例如,我有以下这样一个 UserInfo 信息 假设这样一个场景就是:万一只想获取其中某一个…

机器视觉行业最大的污点是什么?99%机器视觉公司存在测量项目数据造假,很遗憾,本人不没有恪守技术的本分

机器视觉行业最大的污点是什么&#xff1f;99%机器视觉公司存在测量项目数据造假&#xff0c;很遗憾&#xff0c;本人没有恪守技术的本分。 1%是没做过机器视觉测量项目&#xff0c;我们应该具体分析和具体判断&#xff0c;更应该提高自己的认知能力和技术能力。 那我们​在现场…

根据Word模板,使用POI生成文档

突然想起来有个小作业&#xff1a;需要根据提供的Word模板填充数据。这里使用POI写了一个小demo验证下。 测试用模板&#xff1a; 执行结果 1.引入依赖坐标 <dependency><groupId>org.apache.poi</groupId><artifactId>poi-ooxml</artifactId&…

【kafka】记一次kafka基于linux的原生命令的使用

环境是linux&#xff0c;4台机器&#xff0c;版本3.6&#xff0c;kafka安装在node 1 2 3 上&#xff0c;zookeeper安装在node2 3 4上。 安装好kafka&#xff0c;进入bin目录&#xff0c;可以看到有很多sh文件&#xff0c;是我们执行命令的基础。 启动kafka&#xff0c;下面的…

人工智能师求职面试笔试题及答案汇总

人工智能师求职面试笔试题及答案汇总 1.如何在Python中实现一个生成器&#xff1f; 答&#xff1a;在Python中&#xff0c;生成器是一种特殊类型的迭代器。生成器允许你在需要时才生成值&#xff0c;从而节省内存。生成器函数在Python中是通过关键字yield来实现的。例如&…

Opencascad(C++)-创建自定义坐标系

文章目录 1、前言2、在Opencascad中显示小的坐标系3、在Opencascad中创建自定义的坐标系 1、前言 在Opencascad开发时&#xff0c;在view中可以显示小的坐标系&#xff0c;但是有时我们需要在建模时创建基准坐标系&#xff0c;当然可以作为工件坐标系也可以作为基准坐标系。本…

Hive【Hive(八)自定义函数】

自定义函数用的最多的是单行函数&#xff0c;所以这里只介绍自定义单行函数。 Coding 导入依赖 <dependency><groupId>org.apache.hive</groupId><artifactId>hive-exec</artifactId><version>3.1.3</version></dependency>…

Windows 开启 Kerberos 的火狐 Firefox 浏览器访问yarn、hdfs

背景&#xff1a;类型为IPA或者MIT KDC&#xff0c;windows目前只支持 firefoxMIT Kerberos客户端的形式&#xff0c;其他windows端浏览器IE、chrome、edge&#xff0c;没有办法去调用MIT Kerberos Windows客户端的GSSAPI验证方式&#xff0c;所以均无法使用 Windows 开启 Kerb…

第五部分:Tomcat

5.1&#xff1a;JavaWeb 5.1.1&#xff1a;JavaWeb的概念 ①什么是JavaWeb? JavaWeb是指所有通过Java语言编写可以通过浏览器访问的程序的总称 JavaWeb是基于请求和响应来开发的 ②什么是请求&#xff1f; 请求是指客户端给服务器发送数据&#xff0c;叫请求Request ③什么是…

按键精灵开发环境搭建

按键精灵是一个可用于编写自动化执行程序的软件&#xff0c;不仅可以用于PC端&#xff0c;也可以用于手机端&#xff0c;平台稳定&#xff0c;生态良好&#xff0c;开发快捷&#xff0c;是自动化软件开发必不可少的利器。 1. 下载软件 官网&#xff1a;按键精灵_按键精灵论坛…

tcp/ip该来的还是得来

1. TCP/IP、Http、Socket的区别 \qquad 区别是&#xff1a;TCP/IP即传输控制/网络协议&#xff0c;也叫作网络通讯协议&#xff0c;它是在网络的使用中的最基本的通信协议。Http是一个简单的请求-响应协议&#xff0c;它通常运行在TCP之上。Socket是对网络中不同主机上的应用进…

xlsread函数用法

xlsread 是 MATLAB 中用于读取 Microsoft Excel 文件&#xff08;.xls 和 .xlsx 格式&#xff09;的函数。它可以帮助你将 Excel 文件中的数据读取到 MATLAB 中&#xff0c;以便进行进一步的分析和处理。下面是 xlsread 函数的一般用法和一些常见的选项&#xff1a; [num, txt,…

el-table 列分页

<template><div><el-table:data"tableData":key"tampTime"style"width: 100%"><el-table-columnprop"name"label"姓名"width"180"></el-table-column><el-table-columnprop&quo…

Node.js 中解析 HTML 的方法介绍

在 Web 开发中&#xff0c;解析 HTML 是一个常见的任务&#xff0c;特别是当我们需要从网页中提取数据或操作 DOM 时。掌握 Node.js 中解析 HTML 的各种方式&#xff0c;可以大大提高我们提取和处理网页数据的效率。本文将介绍如何在 Node.js 中解析 HTML。 基本概念 HTML 解析…