首页react V6 路由懒加载

react V6 路由懒加载

时间: 2025-04-20 13:34:29 浏览: 33

### React v6 路由懒加载实现在 `react-router-dom` v6 中，可以通过组合使用 `React.lazy()` 和 `<Suspense>` 组件来实现路由的懒加载功能。这种方式不仅能够减少初始页面加载时间，还能优化应用程序的整体性能。对于组件级别的懒加载，代码如下所示： ```javascript import React, { Suspense, lazy } from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; const Home = lazy(() => import('./components/Home')); const About = lazy(() => import('./components/About')); function App() { return ( <Router> <Suspense fallback={<div>Loading...</div>}> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </Suspense> </Router> ); } export default App; ``` 上述代码展示了如何定义两个懒加载的组件——`Home` 和 `About`，并通过 `react-router-dom` 的 `Routes` 及 `Route` 来配置路径匹配规则[^1]。当访问对应的 URL 地址时，相应的组件会被按需加载并渲染到界面上，在此之前会先展示给定的 `fallback` 加载提示信息[^3]。为了进一步提升用户体验，还可以考虑引入第三方库如 `react-transition-group` 来为这些动态变化的内容添加平滑过渡效果[^5]。

阅读全文