umi v4.0.21 存在 layouts 重复挂载问题

615 阅读1分钟

1.背景

刚接手一个新项目准备用最新版本的 umi 搭建项目,结果刚运行起来就发现 layouts 被重复挂载的问题

2.原因

image.png

从图中可以看到这是一个非常简单的例子。例子中只有一个 home 页,home 页被包裹在 layout 中。结果在浏览器中回发现出现 layout 被挂载两次的现象,如下图所示:

1663851174856.png

出现这个现象的原因是 umi 新版本的路由设计就是如此。约定式路由会默认被包裹在 layout 中。而此处的 layout 指向的正是项目中的 layouts/index.jsx|tsx。在 github 中也提到了该问题

1663851311747.png

3.解决方法

将 layouts 目录下的 index 文件改名即可,例如将 index 改名为 layouts

image.png