使用的是配置式路由，为何请求/，是得到的layout的显示？

Question

在umi4 max的默认项目中，

config/routes.ts 内容：

export default [
  { path: "/", component: "index" },
  { path: "/docs", component: "docs" },
  { path: "/test", component: "test" },
]

src/pages/index.tsx

import yayJpg from '../assets/yay.jpg';

import { Button } from 'antd';

const HomePage = () => {
  return (
    <div>
      <h2>Yay! Welcome to umi!</h2>
      <p>
        <img src={yayJpg} width="388" />
      </p>
      <p>
        To get started, edit <code>pages/index.tsx</code> and save to reload.
      </p>
      <Button type="primary">按钮</Button>
    </div>
  );
}

export default HomePage

但是在访问/的时候，却显示的是Layout（为何不是src/pages/index.tsx呢？）：

Answer 1

umi 内部逻辑，约定如此。
约定式路由这里的文档也讲了：https://umijs.org/docs/guides...

约定 src/layouts/index.tsx 为全局路由。返回一个 React 组件，并通过 <Outlet /> 渲染嵌套路由。