当前位置：首页 > article >正文

解决react 路由切换，页面闪屏的bug

article 2024/12/24 12:56:39

在router目录中添加如下配置

// // 配置路由信息
import {Navigate } from "react-router-dom"
import {lazy,Component, Suspense } from "react"
import { JSX } from 'react/jsx-runtime'


// 懒加载模式需要使用loding
const Layout=lazy(()=>import("@/layout/index"))

const Home = lazy(()=>(import("@/pages/home")))
const Page404=lazy(()=>(import("@/pages/404/index")))

// 设置
const Systemset = lazy(()=>(import("@/pages/systemSet/index")))
const Citytree = lazy(()=>(import("@/pages/systemSet/cityTree/index")))
// 登录
const Login=lazy(()=>import("@/pages/login/index"))

// 充电桩管理
const ChargManage=lazy(()=>(import("@/pages/chargingManagement/index")))
// 充电站管理
const ChargMangeList=lazy(()=>import("@/pages/chargingManagement/list/index"))
// 添加充电站
const AddChargingStation=lazy(()=>import("@/pages/chargingManagement/list/addCharging"))
// 充电桩
const ChargStation=lazy(()=>import("@/pages/chargingManagement/chargingStation/index"))
// 添加充电桩
const AddChargStation=lazy(()=>import("@/pages/chargingManagement/chargingStation/addCharging"))
// vr信息
const Vrfile=lazy(()=>import("@/pages/chargingManagement/vrFile/index"))
// 评价
const Evaluate=lazy(()=>import("@/pages/chargingManagement/evaluate/index"))
// 用户管理
const User=lazy(()=>import("@/pages/user/index"))
const UserList=lazy(()=>import("@/pages/user/list/index"))

// <Suspense>占位组件
/*当懒加载组件还没有加载出来的时候，先用占位组件显示。里面有一个属性fallback，
里面传进去的组件就是占位组件。有<Suspense>表示该组件懒加载出来的，决定是否懒加载出来的看是不是React.lazy().*/
const withLoading=(somp:JSX.Element)=>(
    <Suspense fallback={<div>加载中...</div>}>
           {somp}
        </Suspense>
)

interface rout{
    path:string,
    element:Component,
    label:"",
    children?:Array<any>
}
export interface routerInterfase extends rout{}
const RourterData:Array<any>=[
    {
        path: '/',
        element:<Navigate to='/home'></Navigate>, //路由重定，默认会跳转到/home路由下
        label:"首页",
        meta:{
            title:"首页"
        }
    },
    {
        path: '/',
        // <AutnToken><Layout></Layout></AutnToken>
        element:<Layout></Layout>,
        label:"首页",
        meta:{
            title:"首页"
        },
        children:[
            {
                path:'/home',
                element:withLoading(<Home></Home>),
                // element:<Home></Home>,
                label:"首页",
                meta:{
                    title:"首页"
                }
                
            },
            {
                path:'/chargingStation',
                element:withLoading(<ChargManage></ChargManage>),
                label:"充电站管理",
                meta:{
                    title:"充电站管理"
                },
                children:[
                    {
                        path:'/chargingStation/list',
                        element:withLoading(<ChargMangeList></ChargMangeList>),
                        label:"充电站列表",
                        meta:{
                            title:"充电站列表"
                        }
                    },
                    {
                        path:'/chargingStation/addCharginns',
                        element:withLoading(<AddChargingStation></AddChargingStation>),
                        label:"添加充电站",
                       
                    },
                    {
                        path:'/chargingStation/chargingPile',
                        element:withLoading(<ChargStation></ChargStation>),
                        label:"充电桩列表",
                        meta:{
                            title:"充电桩列表"
                        }
                    },
                    {
                        path:'/chargingStation/addCharginnsStation',
                        element:withLoading(<AddChargStation></AddChargStation>),
                        label:"添加充电桩",
                    },
                    {
                        path:'/chargingStation/varfile',
                        element:withLoading(<Vrfile></Vrfile>),
                        label:"vr信息",
                    },
                    {
                        path:'/chargingStation/evaluate/:id',
                        element:withLoading(<Evaluate></Evaluate>),
                        label:"评价管理",
                    }
                ]
            },
            {
                path:'/user',
                element:withLoading(<User></User>),
                label:"用户管理", 
                children:[
                    {
                        path:'/user/list',
                        element:withLoading(<UserList></UserList>),
                        label:"用户列表",
                        meta:{
                            title:"用户列表"
                        }
                    }
                ]
            },
            {
                path:'/systemSet',
                element:withLoading(<Systemset></Systemset>),
                label:"设置",
                meta:{
                    title:"设置"
                },
                children:[
                    {
                        path:'/systemSet/list',
                        element:withLoading(<Citytree></Citytree>),
                        label:"区域管理",
                        meta:{
                            title:"区域管理"
                        }
                    }
                ]
            }
        ]
    },
    {
        path: '/login',
        element:<Login></Login>,
        label:"登录"
    },
    {
        path: '*',
        element:<Page404></Page404>,
        label:"404"
    },
]

  export default RourterData;