react-router-dom v6 实现路由懒加载流程

在 React Router v6 中，路由的懒加载流程与 v5 有所不同。以下是实现路由懒加载的步骤：

1. 确保你已经安装了 `react-router-dom` 的版本为 6.x。

npm install react-router-dom@next

2. 导入需要使用的组件和函数：

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

3. 创建需要懒加载的组件：

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

4. 使用懒加载的组件和路由：

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

export default App;

在上面的代码中，`Suspense` 组件用于在组件加载期间显示一个加载提示（例如 "Loading..."），直到组件加载完成。`fallback` 属性指定了加载期间显示的内容。

使用 `Routes` 组件来定义路由，而不是之前的 `Switch` 组件。

在每个 `Route` 组件中，使用 `element` 属性来指定要渲染的懒加载组件。

这样，当用户访问相应的路由时，对应的组件将会被动态加载并渲染。

请注意，v6 中还有其他一些变化，如路由路径匹配的语法和路由传参等。你可以查阅 React Router v6 的官方文档以获取更详细的信息。

希望这个例子对你有帮助！如果有任何问题，请随时向我提问。