[Solved] Error:The above error occurred in one of your React components & A component suspended while respondi

lazyLoad of routing components, lazy loading problem, when using the lazy function of react in conjunction with the import() function to dynamically load routing components.

import React, { Component, lazy } from 'react'
·······

const Login = lazy(()=>import('XXXX'))

The following errors will be reported:

Error analysis: suspended=> When the network speed is slow and the specified routing component page is not loaded, you need to use the fallback in suspend to load the contents of the fallback before the specified page appears.

Solution:

import React, { Component, lazy,Suspense } from 'react'
·····

const Home = lazy(()=> import('./Home'))
const About = lazy(()=> import('./About'))

·······
<Suspense fallback={<h2>Loading..</h2>}>
  <Routes>
     <Route path="/about" element={<About/>}/>
     <Route path="/home" element={<Home/>}/>
   </Routes>
</Suspense>

Read More: