React|React 如何添加路由懒加载
主体说明
我们会把流程分成两步：『配置路由』和『添加懒加载』。
如果你知道路由，或者已经配置好了，可以直接跳转到『添加懒加载』
配置路由
react有两个包react-router和react-router-dom，如果只是h5开发，选择后者即可。
安装依赖
因此，我们首先安装好需要的路由包：
npm install --save react-router-dom配置 比如我们有两个页面
page1.jsx和page2.jsx(如果是tsx也类似的)，那么，就需要在配置路由的地方添加下面代码(下面以入口文件为例)：import React from "react"
import ReactDOM from 'react-dom'
import { HashRouter, Route, Switch } from 'react-router-dom'import Page1 from './page1.jsx'
import Page2 from './page2.jsx'ReactDOM.render((然后，你在页面就可以访问对应的页面了，比如第一页：
http://localhost:8080/#/page1添加懒加载 路由配置好了以后，你会发现，
入口代码、page1.jsx和page2.jsx 三个页面打包成一个js了，如果交易特别多，那首屏渲染是非常慢的，怎么办？安装依赖 首先，你需要安装一个用于懒加载的依赖包：
npm install --save react-lazily-component引入并使用 接着，你需要在用的地方引入：
import ReactLazilyComponent from 'react-lazily-component'然后，我们把引入
page1.jsx和page2.jsx的地方改造一下：let Page1 = ReactLazilyComponent(() => import('./page1.jsx'))
let Page2 = ReactLazilyComponent(() => import('./page2.jsx'))别的不变，再试试，就已经实现懒加载了。
【React|React 如何添加路由懒加载】
入口代码、page1.jsx和page2.jsx会打包成三个js，如果访问page1，只会加载入口代码和page1代码。推荐阅读
- 考研英语阅读终极解决方案——阅读理解如何巧拿高分
- 如何寻找情感问答App的分析切入点
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus使用queryWrapper如何实现复杂查询
- 如何在Mac中的文件选择框中打开系统隐藏文件夹
- 漫画初学者如何学习漫画背景的透视画法（这篇教程请收藏好了！）
- java中如何实现重建二叉树
- Linux下面如何查看tomcat已经使用多少线程
- thinkphp|thinkphp 3.2 如何调用第三方类库
- 2019女表什么牌子好（如何挑选女士手表？）