react 路由懒加载引起的问题

Error handled by React Router default ErrorBoundary: Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

问题是在路由页面使用了react的懒加载，路由切换的时候异步加载的问题报错
 

// router.js
import React,{lazy} from 'react'

// import Home from "../pages/home";
// import Login from "../pages/login";
// import NotFound from "../pages/notFound";

const  Home  = lazy(()=>import("@/pages/home"));

const  Login  = lazy(()=>import("@/pages/login"));
const  NotFound  = lazy(()=>import("@/pages/notFound"));

只需要在路由的外层包一层Suspense标签，即可异步等待加载路由

import { Suspense } from 'react';
ReactDOM.createRoot(document.getElementById('root')!).render(
  <Suspense>
    <RouterProvider
      router={router}>
    </RouterProvider>
  </Suspense>
)