react-router-dom v5 路由懒加载

在 React Router v5 中，你可以使用 React.lazy() 和 Suspense 组件来实现路由的懒加载。下面是一个示例：

首先，确保你已经安装了 `react-router-dom` 的版本为 5.x。

npm install react-router-dom@5

然后，你可以按照以下步骤来实现路由的懒加载：

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

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

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

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

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

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;

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

`lazy` 函数用于动态导入组件。传递给 `lazy` 函数的参数是一个返回 `import()` 方法的函数，该方法会异步加载组件。

在 `Route` 组件中，将懒加载的组件作为 `component` 属性的值传递。

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

希望这个例子能帮到你！如果有任何问题，请随时问我。