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

日常踩坑之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