React 路由动态加载

Posted 2023-03-15

参考技术A 在首页 App.js 中，直接使用 import ... from ... 引入组件，并赋值为 <Route></Route> 标签的 component 属性。该引入方式下，无论用户访问的路径定位到哪个路由，都会在渲染之前加载所有的组件。假设用户只访问了 '/' 页面，并没有继续进入 '/cart' 页，那么原先加载的 Cart 组件就不需要被渲染，那么加载 Cart 组件所消耗的时间与带宽都是一种浪费。

为了实现组件的动态加载，可以使用 import() 的动态加载方法，在需要时再加载某一组件。但是， <Route> 标签的 component 属性期待的是一个组件。因此，需要实现一个高阶组件，以动态加载函数为参数，并将加载得到的组件作为结果返回。