React Router 是如何配置组件的懒加载？

React Router 可以通过配合 React 的 React.lazy() 和 Suspense 组件来配置组件的懒加载。以下是使用 React Router 实现懒加载的基本步骤：

1. 使用 React.lazy 实现动态导入: React.lazy() 是一个允许你动态加载组件的函数。它可以让你定义一个动态导入的组件，并且这个组件会在首次渲染时自动加载。

   jsx
   const LazyComponent = React.lazy(() => import('./LazyComponent'));

2. 使用 Suspense 组件包裹路由: 在你的应用中，你需要使用 Suspense 组件来包裹懒加载的路由。Suspense 可以指定一个加载指示器（比如一个 spinner），它会在懒加载组件加载完成之前显示。

   jsx
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import React, { Suspense } from 'react';
   
   const LazyComponent = React.lazy(() => import('./LazyComponent'));
   
   function App() {
     return (
       <Router>
         <Suspense fallback={<div>Loading...</div>}>
           <Switch>
             <Route path="/lazy" component={LazyComponent} />
             {/* 其他路由 */}
           </Switch>
         </Suspense>
       </Router>
     );
   }

3. 为懒加载组件创建独立的 chunk: 当你使用 create-react-app 或其他构建工具时，它会为每个用 React.lazy() 引入的组件自动创建一个独立的 JavaScript chunk 文件。这意味着这些代码只会在用户需要时才会被加载。

举个例子，假设你有一个很大的组件 BigComponent，你不希望它在应用首次加载时就加载进来，而是希望当用户真正访问到该组件对应的路由时再加载，你可以这样设置：

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

const BigComponent = React.lazy(() => import('./BigComponent'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading Big Component...</div>}>
        <Switch>
          <Route path="/big-component" component={BigComponent} />
          {/* 其他路由 */}
        </Switch>
      </Suspense>
    </Router>
  );
}

在上述例子中，当用户访问 /big-component 路径时，BigComponent 会被动态加载。用户会看到 "Loading Big Component..." 的文本，直到 BigComponent 加载完成并准备好渲染。这样可以减少应用的初始加载时间，并且按需加载资源，提高性能。