react的路由懒加载请简单举例

在React中，可以使用React.lazy函数来实现路由的懒加载。React.lazy函数接受一个函数作为参数，这个函数需要动态地import一个组件模块。下面是一个简单的例子：

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

// 懒加载组件
const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
const Contact = lazy(() => import('./Contact'));

const 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函数懒加载了Home、About和Contact组件。在组件的导入语句中，我们使用动态的import语法来导入组件模块。

在App组件中，我们使用了Suspense组件来指定一个在懒加载组件加载过程中的fallback(备用内容)。在这个例子中，我们简单地显示了一个Loading...的文本。

在Switch组件中，我们使用Route组件来指定不同的路径和对应的懒加载组件。exact属性用于精确匹配路径