react 路由懒加载

React 路由懒加载是一种优化技术，它可以帮助我们提高 React 应用程序的性能。当应用程序包含大量页面或组件时，使用路由懒加载可以减少初始加载时间并降低资源占用。

要实现路由懒加载，我们可以使用 React Router 库提供的 `React.lazy` 函数和 `Suspense` 组件。下面是一个示例：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// 使用 React.lazy 定义需要懒加载的组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

在上面的示例中，我们首先使用 `React.lazy` 函数将要懒加载的组件引入。然后，我们将这些懒加载的组件用 `<Suspense>` 组件包裹，并设置一个 `fallback` 属性来定义在组件加载过程中显示的加载提示。最后，我们在 `<Switch>` 组件中使用 `<Route>` 来定义各个页面的路由路径和对应的组件。

使用路由懒加载后，当用户访问到某个页面时，对应的组件才会被动态加载并渲染，从而提高了应用程序的加载速度和性能。

希望对你有所帮助！如果还有其他问题，请随时提问。