小白视角学antd umi（二） - 约定式路由

这篇文章主要介绍一下umi约定式路由的使用。主要参考umi官方文档：https://umijs.org/zh-CN/docs/convention-routing

一、 基本使用

约定式路由是以文件系统为基础的路由。umi会分析src/pages目录，并根据目录文件结构自动生成对应的路由。如果你用过Jekyll或者Hugo之类的网页生成器，那就很容易理解约定式路由。

下面我们就来尝试一下。首先先看一下现在src/pages的目录结构（上一篇文章的脚手架创建的项目）:

src
└── pages
    ├── index.less
    └── index.tsx

我们来添加一个新的页面page1：

src
└── pages
    ├── index.less
    └── index.tsx
    └── page1.js

为了简便起见，这里使用了javascript，当然你也可以使用typescript。页面代码：

//page1.js
import React from 'react'

export default function Page1(props){
   
  return(
    <div>
      This is page 1.
    </div>
  )
}

运行项目：

yarn start

打开浏览器 http://localhost:8000/page1 预览一下:

怎么是空白页面？因为umi约定只有当配置文件中没有routes这一项时才会启用约定式路由，所以我们还需要注释掉配置文件中的route配置：

//.umirc.ts
import {
    defineConfig } from 'umi';

export default defineConfig({
   
  nodeModulesTransform: {
   
    type: 'none',
  },
  // routes: [
  //   { path: '/', component: '@/pages/index' },
  // ],
});

此时再预览一下，页面可以正常显示了。

当然，开发时为了更好的组织文件，我们会把有些非页面的文件或文件夹一起放到pages路径里。Umi提供了几种排除规则，满足以下规则的文件不会被注册为约定式路由：

• 以 . 或 _ 开头的文件或目录
• 以 d.ts 结尾的类型定义文件
• 以 test.ts、spec.ts、e2e.ts 结尾的测试文件（适用于 .js、.jsx 和 .tsx 文件）
• components 和 component 目录
• utils 和 util 目录
• 不是 .js、.jsx、.ts 或 .tsx 文件
• 文件内容不包含 JSX 元素

二、 动态路由

Umi约定以[]包裹的文件或文件夹为动态路由。我们直接来试一下，将刚刚创建的page1.js改成[page].js:

src
└── pages
    ├── index.less
    └── index.tsx
    └── [page].js

//[page].js
import React from 'react'

export default function Page(props){
   

  return(
    <div>
      This is page {
   props