拆分复杂度(三)：拆分路由

最新推荐文章于 2025-06-13 00:15:00 发布

原创

最新推荐文章于 2025-06-13 00:15:00 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了如何拆分复杂的前端路由以提高维护性。通过在每个业务模块（feature）中定义自己的路由，创建独立的路由配置文件，并提供了一个基于json结构的路由配置生成方法。讨论了使用react-router-config库的考虑，强调了自定义实现的优势。最后，总结了路由拆分的好处并分享了作者的相关信息。

场景

大多数前端开发者在开发应用时，习惯了在一个路由配置文件中大量的引入组件和配置组件，但当路由多了，就会变得不可维护，尤其在pc端比较明显，可能涉及到10 的业务模块，每个业务模块都涉及了3-5个路由地址，甚至更多。因此按照业务拆分路由是我们降低复杂度的必然方式。

备注：本文分享的是你的router使用的为react-router这个库，版本3.2.1

原来的版本

缺点：当分业务之后，每个业务都有很多子路由，并且因为对应的组件一般都是不同的，要都维护在一个文件中，文件会比较大，不方便对应和查看。

function RouterConfig() {
  return (
    <Router history={hashHistory}>
      <Route path="login" component={Login} />
      <Route path="/" component={Main}>
        <IndexRoute component={ApplyList} />
        <Route path="index" component={Index} />
        <Route path="apply-list" component={ApplyList} />
      </Route>
    </Router>
  );
}

export default RouterConfig;