umi学习：路由

问题导向

umi路由如何使用？如何传递参数？配置式路由如何编写？404页面？

如果你都有了答案，可以忽略本文章，或去umi学习地图寻找更多答案

注意

2.x版本和3.x版本是有一些区别的，这里使用的是3.x版本

---

约定式路由

重点： umi会根据src下pages的文件结构自动生成路由

可以在src下.umi文件夹 → core → routes.ts 文件中查看

如下目录

自动生成路由：src → .umi → core → routes.ts

const routes = [
    {
   
      "path": "/",
      "component": require('C:/Users/PC/Desktop/umi/src/.umi/plugin-layout/Layout.tsx').default,
      "routes": [
        {
   
          "path": "/",
          "component": require('@/layouts/index.js').default,
          "routes": [
            {
   
              "path": "/",
              "exact": true,
              "component": require('@/pages/index.js').default
            },
            {
   
              "path": "/user",
              "exact": true,
              "component": require('@/pages/user/index.js').default
            },
            {
   
              "path": "/user/:userid",
              "exact": true,
              "component": require('@/pages/user/[userid]/index.js').default
            }
          ]
        }
      ]
    }
  ];

---

配置路由

自己手动配置路由，不使用自动生成的路由

可以在.umirc.ts中的routes 写，也可以抽离

import {
    defineConfig } from 'umi';