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

(一)方案

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.mzph.cn/news/31623.shtml

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

相关文章

研究论文关于火灾的烟雾探测

普拉萨梅什加德卡尔 探索所有模型以选择最佳模型。 一、介绍&#xff1a; 烟雾探测器检测烟雾并触发警报以提醒他人。通常&#xff0c;它们存在于办公室、家庭、工厂等。通常&#xff0c;烟雾探测器分为两类&#xff1a; Photoelectric Smoke Detector- 设备检测光强度&#x…

微服务——es数据聚合+RestClient实现聚合

数据聚合 聚合的种类 DSL实现Bucket聚合 如图所示&#xff0c;设置了10个桶&#xff0c;那么就显示了数量最多的前10个桶&#xff0c;品牌含有7天酒店的有30家&#xff0c; 品牌含有如家的也有30家。 修改排序规则 限定聚合范围 DSL实现Metrics聚合 如下案例要求对不同的品…

将一组元素四舍五入到指定精度(小数位数)numpy.around()

【小白从小学Python、C、Java】 【计算机等级考试500强双证书】 【Python-数据分析】 将一组元素四舍五入 到指定精度(小数位数) numpy.around() [太阳]选择题 关于以下代码说法错误的一项是? import numpy as np anp.array([21.3,9.67,8.5, -1.13, -2.67]) print(【显示】a为…

Uniapp基于微信小程序以及web端文件、图片下载,带在线文件测试地址

一、效果 传送门 二、UI视图 <scroll-view scroll-x="true" scroll-y="true" :style

HTML <samp> 标签

定义和用法 以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式&#xff0c;但实际上&#xff0c;这些标签都拥有确切的语义。 我们并不反对使用它们&#xff0c;但是如果您只是为了达到某种视觉效果而使用这些标签的话&#xff0c;我们建议您使用样式表&a…

PIC单片机如何设计延时

PIC单片机如何设计延时 PIC单片机的延时基本有三种,第一种是自己设计的delay()函数,第二种是直接调用库自带的delay()函数,最后一种就是利用其自带的Time定时器。当然不管是自己设计的delay()函数还是库自带的delay()函数的精度都低于Time0定时器的精度,Time定时器是单片机…

使用C语言实现UDP消息接收

目录 简介:步骤:步骤 1: 创建套接字步骤 2: 接收消息步骤 3: 完成 函数及变量解释总结: 简介: 在网络通信中&#xff0c;UDP&#xff08;User Datagram Protocol&#xff09;是一种无连接协议&#xff0c;它提供了一种快速、高效的数据传输方法。本文将向您展示如何使用C语言编…

vmwera中安装的centos8出现ifconfig不可用

刚刚在虚拟机中装好centos结果发现自己的ifconfig命令不可用。 看一下环境变量里有没有ifconfig命令的路径&#xff0c;因为ifconfig是在/sbin路径下的&#xff0c;root用户登录进去才可以运行&#xff0c;先看一下root用户的环境变量。 root用户的环境变量里是有/sbin路径的&a…

ChatGPT生成文本检测器算法挑战大赛

ChatGPT生成文本检测器算法挑战大 比赛链接&#xff1a;2023 iFLYTEK A.I.开发者大赛-讯飞开放平台 (xfyun.cn) 1、数据加载和预处理 import numpy as np import pandas as pd from sklearn.model_selection import train_test_split, cross_val_predict from sklearn.linea…

API 测试 | 了解 API 接口概念|电商平台 API 接口测试指南

什么是 API&#xff1f; API 是一个缩写&#xff0c;它代表了一个 pplication P AGC 软件覆盖整个房间。API 是用于构建软件应用程序的一组例程&#xff0c;协议和工具。API 指定一个软件程序应如何与其他软件程序进行交互。 例行程序&#xff1a;执行特定任务的程序。例程也称…

flowable的ProcessEngine

一、ProcessEngine ProcessEngine 是 Flowable 引擎的核心对象&#xff0c;它是流程引擎的主入口&#xff0c;负责与各个服务进行交互和管理流程的整个生命周期。ProcessEngine 提供了各种方法和服务&#xff0c;以便于我们与流程引擎进行交互和操作。 下面是 ProcessEngine …

springboot 报错处理(长期更新 2023.8.11)

目录 一、HTTP 相关1.1、 数据传输方面1.1.1、 HttpMessageNotWritableException1.1.1.1、 springboot + stomp 场景1.1.2 org.springframework.messaging.converter.MessageConversionException1.1.2.1 WebSocket 数据传输场景一、HTTP 相关 1.1、 数据传输方面 1.1.1、 Htt…

VSCode-Python传参数进行Debug

新建demo.py import argparse def parse_args():description "debug example" parser argparse.ArgumentParser(descriptiondescription) help "The path of address"parser.add_argument(--host,help help) parser.add_ar…

IDEA新建类时自动设置类注释信息,署名和日期

IDEA设置路径 File --> Settings --> Editor --> File and Code Templates --> Include --> File Header 官方模板 这里 ${USER} 会读取计算机的用户名 ${DATE}是日期 ${TIME}是时间 /*** Author ${USER}* Date ${DATE} ${TIME}* Version 1.0*/

lua ipairs pairs

这两个函数都是用来遍历表格数组的&#xff0c;性能几乎没有区别&#xff0c;其他区别如下&#xff1a; iparis只会遍历数字索引&#xff0c;并在遇到第一个非数字索引时终止 paris则会遍历所有 local t {22,33,44,name沧浪水,urlwww.freecls.com,55,66}t[10] 100 for k,v…

从初学者到专家:Java运算符的完整指南

目录 1.算数运算符 2.增量运算符 2.1自增/自减运算符 4. 逻辑运算符 5.位运算符 6.移位运算符 7. 条件运算符 导言&#xff1a; Java作为一门广泛使用的编程语言&#xff0c;其运算符是编写代码时必不可少的一部分。本篇博客将为你详细介绍Java中的各种运算符&#xf…

js玩儿爬虫

前言 提到爬虫可能大多都会想到python&#xff0c;其实爬虫的实现并不限制任何语言。 下面我们就使用js来实现&#xff0c;后端为express&#xff0c;前端为vue3。 实现功能 话不多说&#xff0c;先看结果&#xff1a; 这是项目链接&#xff1a;https://gitee.com/xi1213/w…

“海纳“二维码生成器(绿色版本,离线无需安装)

介绍一款所见即所得的二维码生成器&#xff1a;"海纳"二维码生成器&#xff0c;免费、离线&#xff0c;简单、快捷。 主要功能&#xff1a; 图形界面&#xff0c;所见即所得&#xff1b;支持数字、字符、汉字等生成二维码&#xff1b;支持网址、邮件地址&#xff1…

【Minecraft】Fabric Mod开发完整流程2 - 创造模式物品栏与第一个方块

创造模式物品栏 添加到当前已有物品栏 再添加自定义的创造模式物品栏之前&#xff0c;请确保你的确有这个需求&#xff01;否则建议直接添加到当前已有的物品栏内部 创建新文件&#xff1a;com/example/item/ModItemGroup.java package com.example.item;import net.fabricmc.…

Django-------自定义命令

每次在启动Django服务之前&#xff0c;我们都会在终端运行python manage.py xxx的管理命令。其实我们还可以自定义管理命令&#xff0c;这对于执行独立的脚本或任务非常有用&#xff0c;比如清除缓存、导出用户邮件清单或发送邮件等等。 自定义的管理命令不仅可以通过manage.p…