react router v6总结

一、使用createBrowserRouter()创建路由:

1、src/router/index.js:

import { createBrowserRouter } from "react-router-dom";
import ErrorPage from "@/pages/404/";const router = createBrowserRouter([{path: "/",errorElement: <ErrorPage />,async lazy() {const { default: App } = await import("../App.js");return { Component: App };},children: [{errorElement: <ErrorPage />,children: [{index: true,async lazy() {const { default: Home } = await import("../pages/home/");return { Component: Home };},},{path: "collapse",async lazy() {const { default: Collapse } = await import("../pages/collapse/");return { Component: Collapse };},},{path: "timeline",async lazy() {const { default: Timeline } = await import("../pages/timeline/");return { Component: Timeline };},},],},],},{path: "/admin",async lazy() {const { default: Admin } = await import("../pages/admin/");return { Component: Admin };},},
]);export default router;

注意其中的index: true

{index: true,async lazy() {const { default: Home } = await import("../pages/home/");return { Component: Home };},}

2、src/index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "@/index.css";
import { RouterProvider } from "react-router-dom";
import router from "@/router";
import reportWebVitals from "@/reportWebVitals";const root = ReactDOM.createRoot(document.getElementById("root"));root.render(// <React.StrictMode>//   <App />//   {/* <Admin/> */}// </React.StrictMode><RouterProvider router={router} />
);// 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();

注意其中的:

<RouterProvider router={router} />

3、src/App.js:

import React from "react";
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import "@/App.css";
import SiderMenu from "@/components/sider-menu/";
import { observer } from "mobx-react";
import mobxData from "@/store/MobxData";
import { Outlet } from "react-router-dom";const { Header, Content, Sider } = Layout;const App = () => {return (<Layout className="app-wrapper"><Header className="app-header"><div className="app-logo"><img height="36" src={require("./logo.png")} /></div><Dropdown /></Header><Layout className="app-wrapper-in"><Sider width={mobxData.width} className="app-sider"><SiderMenu /></Sider><Layoutstyle={{padding: "0 24px 0",background: "#e9e9ed",}}><Content className="app-content"><Outlet /></Content></Layout></Layout></Layout>);
};export default observer(App);

注意其中的:

<Outlet />

 4、src/sider-menu/index.js:

import React, { useState } from "react";
import {HomeOutlined,FolderOutlined,AppstoreOutlined,ReadOutlined,TableOutlined,ProductOutlined,MenuFoldOutlined,MenuUnfoldOutlined,
} from "@ant-design/icons";
import "./index.css";
import mobxData from "@/store/MobxData";
import { NavLink } from "react-router-dom";const App = () => {const [status, setStatus] = useState(false);const onclick = () => {setStatus(!status);if (status) {mobxData.changeWidth(30);} else {mobxData.changeWidth(-30);}const elements = document.querySelectorAll(".menu-item dd");for (let i = 0; i < elements.length; i++) {if (status) {elements[i].style.display = "block";} else {elements[i].style.display = "none";}}};return (<div className="menu"><NavLink to="/"><dl className="menu-item"><dt><HomeOutlined /></dt><dd>我的门户</dd></dl></NavLink><NavLink to="/timeline"><dl className="menu-item"><dt><FolderOutlined /></dt><dd>文档中心</dd></dl></NavLink><NavLink to="/collapse"><dl className="menu-item"><dt><AppstoreOutlined /></dt><dd>工作中心</dd></dl></NavLink><dl className="menu-item"><dt><ReadOutlined /></dt><dd>知识中心</dd></dl><dl className="menu-item"><dt><TableOutlined /></dt><dd>表格中心</dd></dl><dl className="menu-item"><dt><ProductOutlined /></dt><dd>应用</dd></dl><div className="collapse">{status ? (<MenuUnfoldOutlined onClick={onclick} />) : (<MenuFoldOutlined onClick={onclick} />)}</div></div>);
};export default App;

注意其中的NavLink及css中添加的active属性

5、路由鉴权:src/components/auth/index.js

import React, { useEffect } from "react";
// import { useNavigate } from "react-router-dom";
import { Navigate } from "react-router-dom";export default function Auth({ children }) {//判断token是否存在localStorage.setItem("token", "1");const isAuth = localStorage.getItem("token");console.log("isAuth");console.log(isAuth);if (isAuth && Number(isAuth) !== 1) {return <>{children}</>;} else {console.log("没有token请重新登录");console.log(<Navigate to="/admin" />);return <Navigate to="/admin" />;}
}

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

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

相关文章

Mysql8.0.30一次表锁问题的解决

起因 给material_config_field_data表的字段建立全文索引的时&#xff0c;发现该表卡死&#xff0c;然后无法对该表进行任何操作。 查找问题 执行sql #这个命令会显示InnoDB存储引擎的详细状态信息&#xff0c;包括锁等待和锁争用的信息 SHOW ENGINE INNODB STATUS结果 复制S…

stable diffusion教程

Stable Diffusion 是一种流行的图像生成模型&#xff0c;它可以根据文本提示生成高质量的图片。如果你想了解如何使用 Stable Diffusion&#xff0c;这里有一些基本的步骤和资源&#xff0c;可以帮助你开始使用&#xff1a; ### 1. 安装 Stable Diffusion 首先&#xff0c;你需…

语言基础 /CC++ 可变参函数设计与实践,变参函数的实现、使用、替代方法

文章目录 概述适用于做可变参数的数据类型格式化字符串输出用int做变长参数类型用结构体指针做变长参数类型用double做变长参数类型用结构体直接做变长参数类型 变参函数与宏定义符号 ... 不能透传符号 ... 不接受ap做参数_VA_ARGS_ 代表可变参数 回调可变参数函数取代变参函数…

Linux 第二十四章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…

Spring MVC(二)

1. 注解RequestMapping修饰类 在Spring MVC中一般都是使用注解RequestMapping来映射请求&#xff0c;也就是通过它来指定控制器可以处理哪些URL请求&#xff0c;相当于Servlet中在web.xml中配置的映射地址作用一致。在上一节的内容中&#xff0c;我们通过注解RequestMapping改进…

计算机系统基础知识

计算机软件基础知识计算机软件基础知识 软件构件 构件又称为组件&#xff0c;是一个自包容、可复用的程序集&#xff0c;这个集合整体向外提供统一的访问接口&#xff0c; 构件外部只能通过接口来访问构件&#xff0c;而不能直接操作构件的内部。 构件的两个最重要的特性是自…

vue3.0(五) reactive全家桶

文章目录 1 reactive1.1 reactive的应用1.2 reactive的特点1.3 reactive的注意1.4 reactive的局限性 2 toRefs3 isReactive4 shallowReactive5 readonly5.1 readonly 详细信息5.2 readonly函数创建一个只读的响应式对象5.3 如何修改嵌套在只读响应式对象中的对象? 6 isReadonl…

小程序(三)

十三、自定义组件 &#xff08;二&#xff09;数据方法声明位置 在js文件中 A、数据声明位置&#xff1a;data中 B、方法声明位置methods中&#xff0c;这点和普通页面不同&#xff01; Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {isCh…

在RK3588开发板使用FFMpeg 结合云服务器加SRS实现摄像头数据推流到云端拱其他设备查看

今天测试了一把在开发板把摄像头数据推流到云端服务器&#xff0c;然后给其他电脑通过val软件拉取显示摄像头画面&#xff0c;浅浅记录一下大概步骤 1.开发板端先下载ffmpeg apt install ffmpeg2.云服务器先安装SRS的库 云服务器我使用ubuntu系统&#xff0c;SRS是个什么东西&…

优雅处理Python 使用xlrd 读取 Excel 报错:xlrd.compdoc.CompDocError

在用python xlrd库读取excel时&#xff0c;有时候会遇到 xlrd.compdoc.CompDocError报错。 其实注释掉库种raise的那几行&#xff0c;可以是可以&#xff0c;但是要修改库文件&#xff0c;并不好。 最好的方式是&#xff1a; wb open_workbook(fpath, formatting_infoTrue…

Mujoco210 和 Mujoco-py 在 Ubuntu22.04 下的安装

mujoco和mujoco-py的关系:mujoco是一个物理引擎,主要应用于强化学习和最优化控制领域。mujoco-py是mujoco编程的 Python 接口,由OpenAI Gym开发,可以使用mujoco_py方便地调用mujoco的API。 mujoco官网: https://mujoco.org/ 1.安装 Mujoco210 1. 从 Github下载 Mujoco …

怎么开发付费视频系统_轻松拥有知识付费平台

在信息爆炸的时代&#xff0c;我们每天都在被海量的内容所包围。但你有没有想过&#xff0c;如何将这些内容变得更加有价值&#xff0c;更加个性化&#xff0c;甚至能够为你带来经济收益&#xff1f;今天&#xff0c;就让我带你走进一个全新的领域——付费视频系统&#xff0c;…

电解制氢电源-零排放氢源生成器

电解制氢电源&#xff1a;氢能源的制造者 氢能作为一种清洁、高效的能源&#xff0c;正逐渐成为我国能源战略的重要组成部分。电解制氢电源作为氢能产业链的核心环节&#xff0c;对于实现氢能产业的可持续发展具有重要意义。 电解制氢电源是一种利用电能将水分解为氢气和氧气的…

RustGUI学习(iced)之小部件(八):如何使用svg部件显示矢量图形?

前言 本专栏是学习Rust的GUI库iced的合集,将介绍iced涉及的各个小部件分别介绍,最后会汇总为一个总的程序。 iced是RustGUI中比较强大的一个,目前处于发展中(即版本可能会改变),本专栏基于版本0.12.1. 概述 这是本专栏的第八篇,主要讲述svg矢量图形部件的使用,会结合实…

Django项目之电商购物商城 -- 新增收货地址

Django项目之电商购物商城 – 新增收货地址 在项目中新增收货地址我们需要根据前端的设置来写 在这里我们看到新增收货地址的方法发送的是一个ajax请求 , 使用的是post方法 , 其路由为addresses/create 分析完毕后开始写视图以及路由 一. 设置视图以及路由 因为新增地址依…

vue数据大屏并发请求

并发? 处理并发 因为js是单线程的&#xff0c;所以前端的并发指的是在极短时间内发送多个数据请求&#xff0c;比如说循环中发送 ajax , 轮询定时器中发送 ajax 请求. 然后还没有使用队列, 同时发送 的. 1. Promise.all 可以采用Promise.all处理并发&#xff0c; 当所有pro…

JavaScript字符串对象的常用方法

JavaScript字符串对象是指通过String构造函数创建的字符串实例。下面是一些常用的字符串方法的详细解析与案例说明&#xff1a; charAt(index)&#xff1a;返回指定索引位置的字符。 var str "Hello World"; console.log(str.charAt(0)); // "H"concat(…

传输层协议——UDP协议

目录 一、传输层 二、再谈端口号 端口号的划分 知名端口号 pidof netstat命令 三、UDP协议 1、UDP协议格式 2、UDP协议特点 3、UDP协议的缓冲区 四、基于UDP的应用层协议 一、传输层 上一篇文章我们所讲到的HTTP协议和HTTPS协议&#xff0c;是属于应用层协议。我们…

vue3.x + echarts 5.x + ant-design-vue 4.x + monaco-editor v3 新增版本切换功能

前言 1. 因为vue架构中&#xff0c;大多数包都是通过npm / yarn 等工具直接安转到node_modules 使用 2. 多个版本切换时&#xff0c;不可能全部安装echarts版本 3. 所以思路围绕如何通过cdn动态引入echarts一、添加工具代码 loadScript 路径 utils/loadScript.js export de…

PYTHON做题复盘

1、关于递归的代码 #会返回None的错误代码while len(string)<1:return Trueelse:if string[0]!string[-1]:return Falseelse:string string[1:-1]#正确while len(string) > 1:if string[0] ! string[-1]:return Falseelse:string string[1:-1]return True 错误原因&am…