react中怎么实现路由懒加载

在React中实现路由懒加载可以通过使用React Router的`React.lazy`和`React.Suspense`来实现。

首先，我们需要使用`React.lazy`来动态导入我们的路由组件。例如，我们可以这样做:

import React from 'react';

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

上面的代码中，`React.lazy`函数接受一个返回`import()`函数的函数作为参数。这将返回一个`Promise`，`React.lazy`将在组件需要渲染时自动解析这个`Promise`，并渲染对应的组件。

然后，我们可以在我们的路由中使用`React.Suspense`来等待所有的懒加载组件加载完成。例如:

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

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>
  );
};

在上面的代码中，`<Suspense>`组件使用`fallback`属性指定在懒加载组件加载完成之前显示的组件。在本例中，我们显示一个简单的"Loading..."文本。

这样，当我们访问到相应的路由时，对应的懒加载组件将会被自动加载并渲染出来。

总结起来，要在React中实现路由懒加载，我们需要使用`React.lazy`来动态导入懒加载组件，并使用`React.Suspense`来等待所有的懒加载组件加载完成时显示相应的内容。