1.背景
刚接手一个新项目准备用最新版本的 umi 搭建项目,结果刚运行起来就发现 layouts 被重复挂载的问题
2.原因
从图中可以看到这是一个非常简单的例子。例子中只有一个 home 页,home 页被包裹在 layout 中。结果在浏览器中回发现出现 layout 被挂载两次的现象,如下图所示:
出现这个现象的原因是 umi 新版本的路由设计就是如此。约定式路由会默认被包裹在 layout 中。而此处的 layout 指向的正是项目中的 layouts/index.jsx|tsx。在 github 中也提到了该问题
3.解决方法
将 layouts 目录下的 index 文件改名即可,例如将 index 改名为 layouts