277/300 React+react-router-dom+Vite 二级页面刷新时,白屏问题解决

news/2024/11/17 18:42:10/

(一)方案

BrowserRouter 换为 HashRouter

(二)代码

import routes from './routes'
import  {ReactElement, Suspense} from 'react'
import {createHashRouter, Navigate} from 'react-router-dom'
// 生成路由数据
const generateRoutes = (routes:  Routes) => {return routes.map((item: RouteParams) => {const {component: Component} = item;const route: RouteObject = {path: item.path}if (item.redirect) {route.element = <Navigate to={item.redirect} replace/>} else if (Component) {route.element = <BeforeEach meta={item.meta} path={item.path}><Suspense><Component/></Suspense></BeforeEach>}if (item.children) {route.children = generateRoutes(item.children)}return route})
}
export default createHashRouter(generateRoutes(routes)
)

(三)更多代码

import routes from './routes'
import  {ReactElement, Suspense} from 'react'
import {createHashRouter, Navigate} from 'react-router-dom'
// 生成路由数据
const generateRoutes = (routes:  Routes) => {return routes.map((item: RouteParams) => {const {component: Component} = item;const route: RouteObject = {path: item.path}if (item.redirect) {route.element = <Navigate to={item.redirect} replace/>} else if (Component) {route.element = <BeforeEach meta={item.meta} path={item.path}><Suspense><Component/></Suspense></BeforeEach>}if (item.children) {route.children = generateRoutes(item.children)}return route})
}// 路由拦截器
const BeforeEach = (props: { meta?: RouteMeta, children: ReactElement, path: String; }) => {const { userStore } = useStores()const { meta, children, path } = props// 未登录if(meta){if(meta.isAuth && !userStore.isLogin || meta.userStatus && meta.userStatus !== userStore.info.status){return (<AutoReverse path={path} />)}}// 设置标题if (meta?.title) {document.title = meta.title}document.body.style.backgroundColor = meta?.backgroundColor || '';return children
}export default createHashRouter(generateRoutes(routes)
)

http://www.ppmy.cn/news/1022739.html

相关文章

leetcode - 75. 颜色分类(java)

颜色分类 leetcode - 75. 颜色分类题目描述双指针代码演示 双指针算法专题 leetcode - 75. 颜色分类 难度 - 中等 原题链接 - 颜色分类 题目描述 给定一个包含红色、白色和蓝色、共 n 个元素的数组 nums &#xff0c;原地对它们进行排序&#xff0c;使得相同颜色的元素相邻&…

Groovy学习笔记-3.Groovy数据类型

更多代码相关的内容可以参考&#xff1a;https://github.com/zclhit/groovy_learning/tree/main 数据类型 groovy在语言层面支持一套数据类型&#xff0c;提供了直接声明和特定的操作符&#xff0c;包括字符、正则和数字类型。也包括范围、列表和映射等。 我将会在这里使用g…

webstorm debug调试vue项目

1.运行npm&#xff0c;然后控制台会打印下图中的地址&#xff0c;复制local的地址 2.run–>Edit Configuration&#xff0c;如下图 3.设置测试项 4.在你需要的js段打好断点 5.在上边框的工具栏里面有debug运行&#xff0c;点击debug运行的图标运行即可

方案展示 | RK3588开发板Android12双摄方案

iTOP-RK3588开发板使用手册更新&#xff0c;后续资料会不断更新&#xff0c;不断完善&#xff0c;帮助用户快速入门&#xff0c;大大提升研发速度。 ​RK3588开发板载4路MIPI CAMERA摄像头接口、MIPI CSI DPHY的4.5Gbps、2.5Gops的MIPI CSI CPHY&#xff0c;四路同时输入&#…

java启动硬编码对应的是什么?

在Java中&#xff0c;启动硬编码&#xff08;Hardcoding&#xff09;指的是在代码中直接使用具体的数值、字符串或其他常量值&#xff0c;而不是通过外部配置文件或变量来获取这些值。 启动硬编码的示例&#xff1a; javaCopy code public class ExampleClass { public stati…

机器学习 day32(神经网络如何解决高方差和高偏差)

解决高偏差和高方差的新方法 之前&#xff0c;我们需要通过选取多项式次数以及正则化参数λ&#xff0c;来平衡高方差和高偏差 只要训练集不是特别大&#xff0c;那么一个大型的神经网络总能很好的适应训练集&#xff0c;即它的Jtrain很低由此可以得出&#xff0c;若要减小Jt…

RabbitMQ 79b5ad38df29400fa52ef0085a14b02f

RabbitMQ 一、什么是消息队列 消息队列可以看作是一个存放消息的容器&#xff0c;其中&#xff0c;生产者负责生产数据到消息队列中&#xff0c;而消费者负责消费数据。消息队列是分布式系统中重要的组件&#xff0c;目前使用较多的消息队列有ActiveMQ&#xff0c;RabbitMQ&am…

tkinter基本控件

1、Label标签、Button按钮 import tkinter as tkwindow tk.Tk() window.title(my window) window.geometry(400x100) var tk.StringVar() l tk.Label(window, textvariablevar, bggreen, font(Arial, 12), width15, height2) l.pack() on_hit Falsedef hit_me():global on_…