react的路由router中使用路由懒加载

在React中使用路由懒加载可以提高应用的性能，因为只有在需要加载某个路由组件时，才会进行网络请求和加载相应的代码。

要在React中使用路由懒加载，你可以使用React.lazy函数来包装组件，然后在路由配置中使用这个懒加载的组件。

下面是一个示例：

首先，安装React Router和React.lazy：

npm install react-router-dom

创建一个懒加载的组件，比如Home组件：

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

在路由配置中使用懒加载的组件：

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

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

const App = () => {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          {/* 其他路由配置 */}
        </Switch>
      </Suspense>
    </Router>
  );
};

export default App;

在上面的代码中，我们使用了React.lazy函数来懒加载Home组件。然后，在路由配置中，我们使用Suspense组件来包裹Switch组件，并设置一个fallback属性来定义加载过程中的占位内容。

这样，在访问/路径时，Home组件才会被加载和渲染。当访问其他路由时，React会根据需要加载相应的组件。

需要注意的是，React.lazy只支持默认导出的组件（即使用export default导出的组件）。如果你的组件使用命名导出（即使用export导出的组件），可以使用React.lazy(() => import('./MyComponent').then(module => ({ default: module.MyComponent })))来处理