日常踩坑之React18懒加载组件导致的路由跳转错误

最新推荐文章于 2024-07-26 11:40:36 发布

安河桥北久铭心

最新推荐文章于 2024-07-26 11:40:36 发布

阅读量2.4k

点赞数 1

分类专栏：前端文章标签： react

本文链接：https://blog.csdn.net/weixin_42496309/article/details/124239708

版权

本文讲述了在React18开发环境中，使用懒加载组件与路由跳转结合时遇到的问题，导致路由跳转时组件未及时加载完成，从而引发白屏和错误。作者通过查阅资料，找到了使用React18新组件来解决这个问题的方法，同时实现了加载动画功能。

摘要由CSDN通过智能技术生成

日常踩坑之React18懒加载组件导致的路由跳转错误

react18中提供了lazy函数，用于懒加载，即当用到的时候才会开始加载，但是路由跳转是立刻完成的，所以就不免出现需要渲染的组件和没有加载完毕，本来也没多大问题，也就是会白屏用户体验不好，这个问题在以前的版本是不会报错的，但是本开发环境中却直接报错了，查了很多资料，终于找到了比较好的解决方案，使用react18提供的新组件Suspense解决了，顺手还能实现个加载显示加载动画的功能。

1.该问题出现的开发环境

react 18.0.0
react-router-dom 6.3.0

2. Talk is cheap, show me you code

// index.js
import React, {
    lazy, Suspense } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import {
   Spinner} from 'react-bootstrap'
import {
   
  BrowserRouter,
  Routes,
  Route,
} from "r