React路由懒加载

在React中实现路由的懒加载，可以使用React的代码分割特性，结合动态导入（使用import()语法）来实现。以下是一个简单的例子：

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
 
// 动态导入Home组件
const Home = lazy(() => import('./Home'));
 
// 动态导入About组件
const About = lazy(() => import('./About'));
 
const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);
 
export default App;

在这个例子中，我们使用lazy函数和import()语法来创建懒加载组件。Suspense组件用于在组件还未加载完成时渲染一个加载状态的占位符。fallback属性就是你想要展示的加载状态。这样，当用户访问不同的路由时，对应的组件会懒加载，提升应用的加载性能。