react-router4踩坑一：react-loadable的配置

最新推荐文章于 2021-12-27 23:47:47 发布

闹屋

最新推荐文章于 2021-12-27 23:47:47 发布

阅读量4k

点赞数 1

分类专栏： React 文章标签： React React-Router

本文链接：https://blog.youkuaiyun.com/Jutal_ljt/article/details/79903439

版权

本文介绍了在react-router4中使用react-loadable进行组件懒加载时遇到的问题，即使用react-loadable后组件无法获取路由的exact属性。通过分析，发现原因是react-loadable创建的中间组件影响了props的传递。解决方案是将props正确传递到懒加载组件，以确保匹配路由的属性可以正常使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react-router4中使用react-loadable进行组件的懒加载和代码分割。不同于以往的版本的react-router，react-loadable将react的组件化思想贯彻到底，其懒加载即使用react-loadable创建一个懒加载的组件。

刚开始使用的时候我仿照官方的事例对自己开发的需要懒加载的组件进行处理：

```
// Dashboard
const LoadableDashboard = Loadable({
  loader: () => import('../Dashboard'),
  loading: Loading
});

export class Dashboard extends React.Component {
   
  render() {
    return <LoadableDashboard/>
  }
}

但在使用过程中发现react-loadable和路由一同使用时，在组件会获取不到路由的match属性，调用match.isExact时报错，报错的代码部分如下：