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] Vue3 Configuration routing error: Catch all routes (“*“) must now be defined using a param with a custom regexp.
- [Solved] vue-roter 4 Error: Error: Invalid route component/Uncaught (in promise) Error: Invalid route component
- Vue displays 404 and 500 interfaces according to HTTP response status
- [Solved] react-router-dom Error: index.js:1 Warning: Functions are not valid as a React child.
- React: How to Solve Web3 import error
- React Error: history is undefined [How to Solve]
- Failed to resolve async component default: ChunkLoadError: Loading chunk 7 failed
- [Solved] Vue-cli Error: Module not found: Error: Can‘t resolve ‘vue-router ‘
- VueUncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: “/
- React error boundary (What You Should Know & How to Solve)
- Nuxt integrate with qiankun as the main application Error: SKIP_BECAUSE_BROKEN
- [Solved] React Startup Error at the First time :SyntaxError: Unexpected token
- How to Solve React devtools plug-in Error
- [Solved] Front end error: Unknown custom element
- [ERR_INVALID_ARG_TYPE]: The “path“ argument must be of type string. Received undefined error
- Anti card limited Drag Based on react draggable drag
- Vue wran name Error: Unkown custom element [How to Solve]
- How to React page to achieve entry and exit animation
- [Solved] uni app TypeError: undefined is not an object (evaluating ‘modules[moduleId].call‘) __ERROR
- [Solved] Hydration failed because the initial UI does not match what was rendered on the server