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

这篇具有很好参考价值的文章主要介绍了277/300 React+react-router-dom+Vite 二级页面刷新时,白屏问题解决。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

(一)方案

BrowserRouter 换为 HashRouter文章来源地址https://www.toymoban.com/news/detail-639973.html

(二)代码

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)
)

到了这里,关于277/300 React+react-router-dom+Vite 二级页面刷新时,白屏问题解决的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 探索React Router:实现动态二级路由

    我有一个路由配置的二维数组,想根据这个数组结合路由组件来动态生成路由,应该怎么样实现。在 React Router 6 中渲染二级路由的方式跟 React Router 65相比有一些变化,但核心思路仍然是利用 Route 组件和路由嵌套的方式。下面是具体的步骤: 定义路由数组 注意,这里我们使用

    2024年04月25日
    浏览(30)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(56)
  • 【React Router】React Router学习笔记

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 知道如何为我们搭建嵌套的 UI,因此我们不用手动找出需要渲染哪些 Child 组件。 获取URL参数。当渲染组件时,React Router 会自动向 Route 组件

    2024年02月08日
    浏览(34)
  • React原理 - React Virtual DOM 原理

    目录 扩展学习资料  Virtual DOM 是什么【虚拟dom】 React渲染 Virtual DOM VS 原生DOM【vDom是否比原生Dom更高效】 Virtual DOM数据结构 Virtaual DOM Diff【虚拟dom前后比对,更新不同dom的算法】 源码解读 react源码组织方式: React Stack Reconciler【react 栈 协调】 react v15.6.2 源码 练习 名称 链接

    2024年02月11日
    浏览(47)
  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(69)
  • react---react router 5 基本使用

    目录 1.路由介绍 2.路由使用 3.路由组件和一般组件 4.Switch 单一匹配 5.解决二级路由样式丢失的问题 6.路由精准匹配和模糊匹配 7.Redirect路由重定向 1.路由介绍 路由是根据不同的 URL 地址展示不同的内容或页面,在 SPA 应用中,大部分页面结果不改变,只改变部分内容的使用。

    2024年02月09日
    浏览(32)
  • 【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,根据不同的url地

    2024年02月01日
    浏览(40)
  • 面试题-React(二):React中的虚拟DOM是什么?

    一、什么是虚拟DOM? 虚拟DOM是React的核心概念之一,它是一个轻量级的JavaScript对象树,用于表示真实DOM的状态。在React中,当数据发生变化时,首先会在虚拟DOM上执行DOM更新,而不是直接操作真实DOM。然后,通过比较前后两个虚拟DOM的差异,最小化真实DOM的操作,从而减少页

    2024年02月12日
    浏览(49)
  • React + 二级目录 + Nginx配置

    背景: 由于子域名有限,我们需要将不同的前端项目进行二级目录区分。 一、项目 现有三个项目: bsrm-web-manage bsrm-web-operator bsrm-web-testingorganization 二、期望访问路径 http://bsrm.life.com/bsrm-web-manage http://bsrm.life.com/bsrm-web-operator http://bsrm.life.com/bsrm-web-testingorganization 三、React 配

    2024年02月15日
    浏览(48)
  • 前端react入门day03-react获取dom与组件通信

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 受控表单绑定  React中获取DOM 组件通信 父传子  父传子-基础实现 父传子-props说明 父传子 - 特殊的prop children 子传父  使用状态提升实现兄弟组件通信 使用Context机制跨

    2024年02月01日
    浏览(55)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包