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:
- [Solved] component import error is declared in the statement of components
- [Solved] React Error: ReactDOM.render is no longer supported in React 18.
- [Solved] Vue3.0 Error: The component has been registered but not used vue/no-unused-components, Close eslint
- [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.
- [Solved] vue-roter 4 Error: Error: Invalid route component/Uncaught (in promise) Error: Invalid route component
- [Solved] React Invariant Violation: Minified React error #130
- [Solved] React Dependency Error: Invalid tag name “^np.0.2“ of package “react@^np.0.2“: Tags may not have an
- React: How to Solve Web3 import error
- React Error: history is undefined [How to Solve]
- The solution to the problem that the custom styles of UI components such as element-ui in the vue project do not take effect
- React error boundary (What You Should Know & How to Solve)
- How to Solve React devtools plug-in Error
- [Solved] React Startup Error at the First time :SyntaxError: Unexpected token
- [Solved] ant design pro vue Startup Error: ERROR Failed to compile with 1 error 20:34:09 error in ./src/components/Num
- [Solved] vite2+vue3 jsx Error: React is not defined
- Failed to resolve async component default: ChunkLoadError: Loading chunk 7 failed
- [Solved] Custom components with click events do not work
- [Solved] React Click the Event to Modify the State Value Error
- How to React page to achieve entry and exit animation
- Anti card limited Drag Based on react draggable drag