静态路由配置

没有子路由

• 流程只有两步

创建页面组件

在 src/pages 目录下创建一个组件文件，例如 src/pages/User/index.tsx。

import { PageContainer } from "@ant-design/pro-components";
function UserPage() {
  return (
    <div>
      <PageContainer
        header={{
          title: "User用户中心",
        }}
      >
        <h1>User用户中心</h1>
      </PageContainer>
    </div>
  );
}

export default UserPage;

在.umirc.ts 的routes 数组中注册

    {
      name: '用户中心',
      path: '/user',
      component: './User',
    }

有子路由

创建页面组件

• pages/Blog/Article/index.tsx

import { PageContainer } from "@ant-design/pro-components";
function ArticlePage() {
  return (
    <div>
      <PageContainer
        header={{
          title: "文章管理",
        }}
      >
        <h1>文章管理</h1>
      </PageContainer>
    </div>
  );
}

export default ArticlePage;

• pages/Blog/Tags/index.tsx

import { PageContainer } from "@ant-design/pro-components";
function TagsPage() {
  return (
    <div>
      <PageContainer
        header={{
          title: "标签管理",
        }}
      >
        <h1>标签管理</h1>
      </PageContainer>
    </div>
  );
}

export default TagsPage;

在.umirc.ts 的routes 数组中注册

    {
      path: '/blog',
      name: '博客系统',
      routes: [
        {
          path: '/blog/article',
          name: '文章管理',
          component: './Blog/Article',
        },
        { path: '/blog/tags', name: '标签管理', component: './Blog/Tags' },
      ],
    },