React H5设置企业级v6版本路由的配置

路由配置是项目开发的必要一环,尤其是目前流行SPA,下面看看如何使用v6版本路由进行合理的H5路由配置

一、基本页面结构(目录根据开发要求建,下面仅用于展示配置路由)

在这里插入图片描述

二、具体文件实现

1. index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import vconsole from "vconsole";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import "normalize.css/normalize.css";
import routes from "./router";const BASENAME = "/h5";const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement
);const router = createBrowserRouter(routes, { basename: BASENAME });root.render(<React.StrictMode><RouterProvider router={router} /></React.StrictMode>
);if (process.env.NODE_ENV === "development" ||window.location.search.includes("debug=true")
) {new vconsole();
}

2. App.tsx

import { Suspense } from "react";
import { AliveScope } from "react-activation";
import { Outlet } from "react-router-dom";function App() {return (<Suspense><AliveScope>{/* Outlet是React Router v6中的一个组件,用于在嵌套路由中渲染子路由的组件。它充当一个占位符,表示在这个位置将渲染匹配的子路由组件。 */}<Outlet /></AliveScope></Suspense>);
}export default App;

3. ./router/index.tsx

import App from "@/App";
import type { RouteObject } from "react-router";
import { Navigate } from "react-router-dom";
// @loadable/component 是一个用于 React 应用程序的库,主要用于实现代码拆分和懒加载。它允许你将组件按需加载,从而减少初始加载时间,提高应用性能。
// 官网:https://loadable-components.com/docs/getting-started/
import loadable from "@loadable/component";
import mainRoutes from "./mainRoutes";
import userRoutes from "./userRoutes";const NotFound = loadable(() => import("@/pages/NotFound"));// 在路由的第一层应该在前面加上【/】
// 在 children 里面不需要加【/】,对于嵌套路由,子路径通常不需要以斜杠 (/) 开头,因为它们是相对于父路径解析的。
let routes: RouteObject[] = [{path: "/",element: <App />,children: [mainRoutes, userRoutes],},// 匹配不准确的路由,跳转到 404 页面{path: "*",element: <NotFound />,},
];const Devtool = loadable(() => import("@/pages/Devtool"));// 如果是开发环境,添加 devtool 页面,用于快速页面跳转
if (process.env.NODE_ENV === "development") {routes = [{path: "/",element: <Navigate to={"devtool"} replace />,},{path: "/devtool",element: <Devtool />,},...routes,];
}export default routes;

4. ./router/mainRoutes.tsx

import type { RouteObject } from "react-router";
import KeepAlive from "react-activation";
import { lazy } from "react";
import { Navigate } from "react-router-dom";const MainLayout = lazy(() => import("@/pages/Main/Layout"));const MainList = lazy(() => import("@/pages/Main/List"));const MainDetail = lazy(() => import("@/pages/Main/Detail"));/*** 主要业务内容路由*/
const mainRoutes: RouteObject = {path: "main",element: <MainLayout />,children: [// v6重定向用Navigate标签定义跳转{path: "",element: <Navigate to="list" replace />,},{path: "list",element: (<KeepAlive name="main-list"><MainList /></KeepAlive>),},{path: "detail",element: <MainDetail />,},],
};
export default mainRoutes;

5. ./router/userRoutes.tsx

import type { RouteObject } from "react-router";
import { lazy } from "react";const UserLayout = lazy(() => import("@/pages/User/Layout"));const UserInfo = lazy(() => import("@/pages/User/UserInfo"));/*** 用户信息模块路由*/
const userRoutes: RouteObject = {path: "user",element: <UserLayout />,children: [{path: "info",element: <UserInfo />,},],
};export default userRoutes;

6. Layout.tsx

import { Outlet } from "react-router-dom";const Layout = () => {return <Outlet />;
};export default Layout;

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

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

相关文章

用python的manim库实现表格格式操作【table 下】

1.Table 是 Manim 中用于创建一个包含文本或其他 数学符号的表格的类 Table 是 Manim 中用于创建一个包含文本或其他 数学符号的表格的类它能够帮助你在场景中清晰地展示数据或信息。 参数解释 table: 一个二维数组或列表&#xff0c;表示表格中的内容。每个子列表代表表格的…

Spring Web MVC

1. Spring Web MVC Spring Web MVC是⼀个Web框架 1.1 MVC 举个例子理解: Controller相当于前台,接送请求,传给相关部门,部门派人处理,此时这就是Model MVC是一种思想,Spring进行了实现,称为Spring MVC Spring Boot是创建Spring MVC项目的一种方式而已 1.2 Spring MVC 而…

(第二十七天)

上午 核心&#xff1a;内核中的 ipvs &#xff0c; ipvsadm 1 、安装 ipvsadm [rootnat ~] # yum -y install ipvsadm 2 、配置规则 查看所有的规则&#xff0c;如果已经配置好规则&#xff0c;重启之后也就没有了 [rootnat ~] # ipvsadm -L -n 1 、配置 vip 网卡 &…

如何用Python进行数据可视化、科技图表绘制?

目录 写在前面 推荐图书 推荐理由 写在最后 写在前面 有了它&#xff0c;科技图表绘制、数据可视化真的毫无难度&#xff01; 推荐图书 《Python数据可视化&#xff1a;科技图表绘制》(芯智)【摘要 书评 试读】- 京东图书 图书简介 《Python数据可视化:科技图表绘制》结…

生成式人工智能(大语言模型)上线备案材料

材料总体一览 生成式人工智能&#xff08;大语言模型&#xff09;上线备案&#xff0c;除申请表外还需要提交五份材料&#xff1a; 《生成式人工智能 &#xff08;大语言模型&#xff09;上线备案申请表》 《附件1&#xff1a;安全自评估报告》 《附件2&#xff1a;模型服务协议…

Python(TensorFlow)衍射光学层卷积算法模拟(英伟达GPU)

&#x1f3af;要点 &#x1f3af;衍射光学卷积算法模拟 | &#x1f3af;模拟或数字电子计算之前加入一层光学计算 | &#x1f3af;前馈卷积神经网络计算成像系统对输入图像进行分类 | &#x1f3af;相位掩模利用线性空间不变成像系统执行固有卷积 &#x1f4dc;用例 Python非…

大语言模型与多模态大模型loss计算

文章目录 前言一、大语言模型loss计算1、loss计算代码解读2、构建模型输入内容与label标签3、input_ids与labels格式 二、多模态大模型loss计算方法1、多模态loss计算代码解读2、多模态输入内容2、大语言模型输入内容3、图像embending如何嵌入文本embeding 前言 如果看了我前面…

MySQL学习[4] ——MySQL锁

四、MySQL锁 4.1 MySQL有哪些锁&#xff1f; 4.1.1 全局锁 全局锁就是**对整个数据库实例加锁&#xff0c;主要用于全库逻辑备份**等场景。 flush tables with read lock # 加全局锁unlock tables # 解锁加上全局&#xff08;读&#xff09;锁后&#xff0c;整个数据库都…

css实现水滴效果图

效果图&#xff1a; <template><div style"width: 100%;height:500px;padding:20px;"><div class"water"></div></div> </template> <script> export default {data() {return {};},watch: {},created() {},me…

spring mvc工作流程

Spring MVC 是基于模型-视图-控制器&#xff08;MVC&#xff09;设计模式的 Web 框架&#xff0c;它简化了开发 Web 应用程序的流程。下面是 Spring MVC 的工作流程详细介绍&#xff1a; 客户端请求 --> DispatcherServlet --> HandlerMapping --> Controller --&…

Win10 创建新的桌面2,并实现桌面切换

1. Win10 创建新的桌面2 Win - Tab 2. Win10 桌面切换 Ctrl - Win - ←/→ 我们下期见&#xff0c;拜拜&#xff01;

【大模型从入门到精通14】openAI API 构建和评估大型语言模型(LLM)应用2

这里写目录标题 评估大型语言模型&#xff08;LLM&#xff09;输出的方法构建评估标准实施评估协议利用专家比较案例研究评估客户服务聊天机器人学术文本摘要高级评估技术 评估大型语言模型&#xff08;LLM&#xff09;输出的方法 评估大型语言模型&#xff08;LLM&#xff09…

开源免费的表单收集系统TDuck

TDuck&#xff08;填鸭表单&#xff09;是一款开源免费的表单收集系统&#xff0c;它基于Apache 2.0协议开源&#xff0c;用户可以随时下载源码&#xff0c;自由修改和定制&#xff0c;也可以参与到项目的贡献和反馈中。TDuck表单系统不仅支持私有化部署&#xff0c;还提供了丰…

快排/堆排/归并/冒泡/

常见的内排序算法 插入排序 直接插入排序 原理&#xff1a;相当于扑克牌变成有序&#xff0c;先拿第一张&#xff0c;把他调节成有序&#xff0c;再拿第二张&#xff0c;与第一张相比找到第二张的位置&#xff0c;再继续拿第三张&#xff0c;以此类推。 void InsertSort(in…

【C++二分查找 贪心】792. 匹配子序列的单词数

本文涉及的基础知识点 C二分查找 贪心 LeetCode792. 匹配子序列的单词数 给定字符串 s 和字符串数组 words, 返回 words[i] 中是s的子序列的单词个数 。 字符串的 子序列 是从原始字符串中生成的新字符串&#xff0c;可以从中删去一些字符(可以是none)&#xff0c;而不改变其…

关于Vue项目npm快捷键,点击run启动报错,及npm i也报错的解决办法

1.配置idea的npm 2.点击运行按钮 3.结果 分析原因及问题&#xff1a; npm i npm run dev 由于是刚刚从gitlab新拉的前端代码&#xff0c;可能没有用命令install过类似于没有编译过&#xff0c;所以执行一下上面的命令 结果报错如下&#xff1a; F:\tbyf\qjyy\hip-manager-ui&…

密探 -- 渗透测试工具 v1.14 版

1.如何运行 在jdk8环境下&#xff08;在jdk8以上的高版本请参考常见问题1的处理方案&#xff09;运行以下语句运行: java -jar mitan-jar-with-dependencies.jar 若不想输入这么长太长语句&#xff0c;可以通过以下脚本的方式启动&#xff1a; Mac/Linux 环境下&#xff0c;…

计算机网络——HTTP协议详解(上)

一、HTTP协议简单介绍 1.1 什么是HTTP协议 HTTP&#xff08;超文本传输协议&#xff09;是一种用于在Web浏览器和Web服务器之间传输数据的应用层协议。它是一种无状态协议&#xff0c;即服务器不会保留与客户端的任何连接状态信息&#xff0c;每个请求都被视为一个独立的事务。…

Mysql-约束

概念&#xff1a; 约束是作用于表中字段上的规则&#xff0c;用于限制存储在表中的数据。 目的&#xff1a; 保存数据库中数据的正确&#xff0c;有效性和完整性。 分类&#xff1a; 注意事项&#xff1a;约束是作用在数据表中的字段上的&#xff0c;可以在创建表或修改表的时候…

【开端】Java 分页工具类运用

一、绪论 Java系统中&#xff0c;分页查询的场景随处可见&#xff0c;本节介com.baomidou.mybatisplus.core.metadata.IPage;来分页的工具类 二、分页工具类 public class PageUtils implements Serializable { private static final long serialVersionUID 1L; /**…