react 路由懒加载原理
    React 路由懒加载是指在需要加载路由组件时，只在需要的时候才去加载对应的组件。懒加载可以有效地减少初始渲染时所需的资源，提高页面加载性能。
    React 路由懒加载的原理如下：
    1. 创建一个高阶组件（Higher-Order Component，HOC）或使用 React.lazy 函数。
    2. 当浏览器路由切换至需要加载的路由时，这个 HOC 或 React.lazy 会检查是否已加载该路由对应的组件。
    3. 如果还没有加载该组件，HOC 会向服务器发送请求，下载该组件文件。
    4. 下载完成后，将该组件渲染到页面上。
    使用 HOC 进行路由懒加载的示例代码如下：
    ```javascript
import React, { lazy, Suspense } from 'react';
    const Home = lazy(() => import('./Home'));
const About = lazy(() => import('./About'));
    const App = () => (
  <Suspense fallback={<div&</div>}>
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  </Suspense>
react router 动态路由
);
    export default App;
```
    在上面的代码中，通过 lazy 函数将组件包装起来，只有在使用时才会加载对应的模块。
    Suspense 组件用于指定在加载组件时的 loading 时的展示内容。
    这样，当路径为 "/" 时会加载 Home 组件，当路径为 "/about" 时会加载 About 组件。
    这就是 React 路由懒加载的原理。通过动态加载组件，可以减少初始加载所需的资源，提高页面性能和用户体验。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。