react 项目开发遇到的问题以及解决办法(一) A component suspended while responding to synchronous input

问题描述:

react-dom.development.js:18687 The above error occurred in the <Route.Provider> component:

 ......

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

Uncaught 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.

问题原因:

使用组件懒加载   lazy() 如下图

解决办法:

在使用组件懒加载的时候，在外面套一个react的组件:Suspense  

注: 我是配置在main.jsx 里面的代码如下下图

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'
import './assets/css/reset.css'

import { BrowserRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(

  <BrowserRouter>
    <Suspense>
      <App />
    </Suspense>
  </BrowserRouter>

)