react-router-domv6 路由懒加载

React Router v6 中的路由懒加载可以通过使用 React 的 Suspense 组件和 React.lazy() 函数实现。你可以使用以下代码实现 React Router v6 路由懒加载：

import { Suspense, lazy } from 'react';
import { Router, Route } from 'react-router-dom';

const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

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

在这个例子中，我们使用 React.lazy() 函数加载 Home 和 About 组件。Suspense 组件用于在组件加载完成之前显示一个加载中的提示，并在组件加载完成后渲染这些组件。fallback 属性指定了在组件加载过程中显示的内容。在路由定义时，我们通过 component 属性指定要渲染的组件。