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;相关文章:
React H5设置企业级v6版本路由的配置
路由配置是项目开发的必要一环,尤其是目前流行SPA,下面看看如何使用v6版本路由进行合理的H5路由配置 一、基本页面结构(目录根据开发要求建,下面仅用于展示配置路由) 二、具体文件实现 1. index.tsx import React f…...
【微信小程序】全局配置
1. 全局配置文件及常用的配置项 2.window (1).小程序窗口的组成部分 (2). 了解 window 节点常用的配置项 (3). 设置导航栏的标题 (4). 设置导航栏的背景色 (5). 设置导航栏的标题颜色 (6). 全局开启下拉刷新功能 (7). 设置下拉刷新时窗口的背景色 (8).设置下拉刷新时 loading …...
25届秋招网络安全面试资料库
吉祥知识星球http://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247485367&idx1&sn837891059c360ad60db7e9ac980a3321&chksmc0e47eebf793f7fdb8fcd7eed8ce29160cf79ba303b59858ba3a6660c6dac536774afb2a6330#rd 《网安面试指南》http://mp.weixin.qq.com/s?…...
Adobe Dimension DN v4.0.2 解锁版下载安装教程 (专业的三维3D建模工具)
前言 Adobe Dimension(简称DN)是一款3D设计软件,三维合成和渲染工具,2D平面的二维转为3D立体的三维合成工具,用于3Dmax\C4D\MAYA等三维软件生成的效果图,在3D场景中排列对象、图形和光照。3D应用程序使用的…...
Python中*args 和 **kwargs作参数时有什么区别
*args 和 **kwargs 是 Python 函数定义中用于处理可变数量的参数的语法,初学者对于二者总是傻傻区分不了,今天我们就来详细解读一下这两个在参数传递时有什么不同。 首先要明白单个星号可以解包元组或者列表,两个星号可以解包字典。如&#…...
[CSS3]2D与3D变换技术详解
文章目录 2D变换(2D Transform)3D变换(3D Transform)结语 CSS3中的2D变换与3D变换是指通过transform属性对HTML元素进行几何操作,使其在二维或三维空间中进行移动、旋转、缩放和倾斜等变换。这些变换为前端开发者提供了…...
大恒相机通过Line2或Line3直接给出3.3V触发,形成分时曝光
大恒相机通过Line2或Line3直接给出3.3V触发,形成分时曝光 一、分时曝光需求二、3.3V信号分时曝光设计 写在前面 上班了,没多少时间再去精度论文了,大多是项目上的事情。 一、分时曝光需求 一般的12V光源通过光源控制器与大恒相机Line1线连接…...
electronjs实现打开的网页密码自动保存
在 Electron 中实现自动保存网页密码的功能涉及到几个步骤,以下是一个基本的实现思路: 1. 监听登录事件 首先,你需要监听用户的登录事件。当用户在一个网页上登录后,通常会有一个 POST 请求发送到服务器验证凭据。你可以监听这个…...
观测云的自动化监控:CRD 资源与自动发现
在云原生技术快速发展的今天,Kubernetes已成为企业容器化应用的中心舞台。随着应用的规模化和动态化,传统的监控方法已经难以满足需求。自动化监控,以其高效性和准确性,成为云原生监控的新趋势。观测云平台通过与Kubernetes的深度…...
九、OpenCVSharp 中的图像形态学操作
文章目录 简介一、腐蚀1. 腐蚀的原理和数学定义2. 结构元素的形状和大小选择3. 腐蚀操作的代码实现和效果展示二、膨胀1. 膨胀的概念和作用2. 与腐蚀的对比和组合使用(如开运算、闭运算)三、开运算1. 开运算的定义和用途(去除小的明亮区域)2. 开运算在去除噪声和分离物体方…...
http和websocket
http和websocket是什么 网络通信的协议 区别 http: 只能客户端发送,服务端接收。 websocket: 客户端和服务端都可以发送和接收数据。 链接...
Go 语言错误处理
不管使用哪种语言,程序代码都可能包含各种错误,例如语法错误、逻辑错误、除 0 错误和文件缺失等。因此,每种编程语言都有处理错误的内置机制。 1. Go 程序中的错误 需要指出的是,错误有多种类型。语法错误通常是开发人员在编写代…...
LVS部分配置1
LVS nat服务器(作时间服务器) [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 [rootlocalhost ~]# yum -y install ntpdate [rootlocalhost ~]# ntpdate cn.ntp.org.cn [rootlocalhost ~]# which ntpdate [rootlocalhost…...
datax和datax-web打包成docker运行
概述 datax和datax-web从一台机器迁移到另一台时,要重新搭建一套运行环境,比较麻烦;打包成docker镜像后迁移就方便多了; 因为我的mysql版本是8,需要在datax的read和write中手动添加8的jdbc驱动 所以我先各自下载好了datax和data…...
命令行参数环境变量
目录 前言: 命令行参数: 现象: 这些参数的意义: 为什么要这么做? 这些事是谁做的呢? 环境变量 现象: 创建环境变量: 结合程序理解: 前言: 我们在前…...
『大模型笔记』WizardLM:使大型预训练语言模型能够遵循复杂的指令
WizardLM: Empowering Large Pre-Trained Language Models to Follow Complex Instructions 文章目录 一. WizardLM:使大型预训练语言模型能够遵循复杂的指令二. Evolve-Instruct(优化版)2.1. 概述2.2. 实施二. 参考文献WizardLM:使大型预训练语言模型能够遵循复杂的指令:…...
编程-设计模式 2:抽象工厂模式
设计模式 2:抽象工厂模式 定义与目的 定义:抽象工厂模式提供一个接口,用于创建一系列相关或相互依赖的对象,而无需指定它们具体的类。目的:该模式的主要目的是解耦客户端代码与产品类之间的关系,并确保一…...
阿里云智能大数据演进
本文根据7月24日飞天发布时刻产品发布会、7月5日DataFunCon2024北京站:大数据大模型.双核时代实录整理而成,演讲信息如下: 演讲人:徐晟 阿里云研究员/计算平台产品负责人 主要内容: Overview - 阿里云大数据 AI 产品…...
Java面试题———Spring篇①
目录 一,谈谈你对SpringIOC的理解 二,Spring中有哪些依赖注入方式 三,你用过哪些Spring注解 四,SpringBean的作用域有几种 五,Spring中的bean线程安全吗 六,谈谈你对SpringAOP的理解 七,…...
4章10节:用R做数据重塑,变体函数应用详解和可视化的数据预处理介绍
数据重塑(Data Reshaping)是将数据从一种结构转换为另一种结构的过程,是清理、分析和可视化数据的重要步骤。R语言作为数据科学的强大工具,提供了许多包来帮助我们进行数据重塑,其中最常用的就是dplyr包。dplyr包以其简洁的语法和高效的操作速度著称,它不仅可以帮助我们进…...
别再只盯着Midjourney了!2025年,这5款文生图模型更适合你的具体业务场景
2025年五大文生图模型实战指南:如何为你的业务精准匹配AI工具 当Midjourney成为文生图领域的"网红"时,真正懂行的从业者已经在根据具体业务需求选择更合适的工具了。就像专业摄影师不会只用一款镜头拍所有题材,明智的AI应用者需要建…...
QT程序从Windows到ARM开发板:手把手教你解决交叉编译中的屏幕适配问题
QT程序从Windows到ARM开发板:手把手教你解决交叉编译中的屏幕适配问题 在嵌入式开发领域,QT框架因其跨平台特性和丰富的UI组件库而广受欢迎。然而,当我们将QT程序从熟悉的Windows环境迁移到ARM开发板时,往往会遇到各种意想不到的挑…...
Python+Spark+Hadoop商品评论数据分析可视化系统+情感分析 大数据毕业设计
1、项目介绍 技术栈: Python语言、Django框架、MySQL数据库 、Echarts可视化、情感分析、HTML商品评论数据分析可视化系统是基于Python语言和Django框架开发的一个Web应用程序。它的主要功能是对商品评论数据进行分析,并将分析结果通过Echarts可视化库展…...
这次终于选对了!高效论文写作全流程AI论文写作软件推荐(2026 最新)
2026年AI论文写作软件已全面升级,论文写作全流程可拆解为文献调研→选题/开题→大纲/初稿→文献综述→降重/去AI味→润色/格式→查重/投稿七大环节,以下工具按环节精准匹配,兼顾中文适配、降重能力、去AI痕迹、学术合规四大核心需求ÿ…...
在给ppt接入扣子空间(Ai)/智能体,新玩法10分钟搞定说课,公开课AI互动!
做 PPT 时,你是否遇到过这些痛点:演讲中观众突然提问,临时组织语言容易逻辑混乱;同一问题被反复询问,浪费演示时间;静态页面无法按需补充细节,信息传递不精准。而扣子空间(Coze&…...
终极Windows音频路由指南:如何实现多设备音频分离的专业方案
终极Windows音频路由指南:如何实现多设备音频分离的专业方案 【免费下载链接】audio-router Routes audio from programs to different audio devices. 项目地址: https://gitcode.com/gh_mirrors/au/audio-router 你是否曾经遇到过这样的困扰:想…...
Qwen2.5-Omni:多模态流式交互的Thinker-Talker架构与TMRoPE技术解析
1. Qwen2.5-Omni的核心设计理念 第一次接触Qwen2.5-Omni时,最让我惊讶的是它处理多模态数据的流畅程度。想象一下,你正在和AI助手讨论一段视频内容,它能同时理解画面中的物体、背景音乐的情绪,还能用自然语音回应你的问题——这就…...
GT IP跑Aurora 64B66B协议:从变速箱到加扰的实战避坑指南
GT IP实现Aurora 64B66B协议:从变速箱到加扰的工程实践全解析 在高速串行通信领域,Xilinx的GT系列IP核配合Aurora 64B66B协议已成为许多硬件工程师的首选方案。这种组合能够提供高达数十Gbps的数据传输速率,广泛应用于数据中心互连、高性能计…...
互联网大厂Java求职者面试全解析:技术点与场景详解
面试场景介绍 本文通过一场严肃的面试官与搞笑的水货程序员谢飞机之间的面试对话,带你深入了解互联网大厂Java面试的全套流程。涵盖Java核心语言与平台、Spring生态、微服务、安全、消息队列等热点技术,融合多种业务场景,如电商、内容社区、在…...
5G NR物理层实战:如何利用TS 38.211优化无线资源管理
5G NR物理层实战:TS 38.211无线资源管理优化指南 在5G网络部署的深水区,无线资源管理(RRM)的精细化程度直接决定了网络性能天花板。作为3GPP物理层协议集的核心文档,TS 38.211规范中隐藏着诸多未被充分挖掘的优化密钥—…...
