react路由表实现路由懒加载

React 路由表可以通过使用 `React.lazy()` 和 `import()` 实现路由懒加载，从而提高应用程序的性能。以下是一个示例：

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

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

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

export default App;

在上面的示例代码中，我们使用 `React.lazy()` 和 `import()` 引入了 `Home`、`About` 和 `Contact` 组件，然后将它们分别传递给 `Route` 组件的 `component` 属性。`Suspense` 组件用于在加载组件时显示一个加载器。当用户访问路由时，只会加载相应的组件，而不是一次性加载所有组件，从而提高了应用程序的性能。