umi 配置路由 独立路由文件

1、项目根目录下新建文件夹

2、在 routers/index.tsx中放置路由

index.tsx代码如下

import { IRoute } from 'umi' // 引入的 umi 里的路由接口定义规则

const routers: IRoute[] = [
    {
    	// 加路由动画
        path: '/',
        component: '@/layouts',
        routes: [
            {
                path: '/',
                component: '@/pages/Login',
                redirect: '/login',
            },
            {
                path: '/login',
                component: '@/pages/Login',
            },
            {
                path: '/home',
                component: '@/pages/Home',
                wrappers: ['@/wrappers']
            },
        ],
    },
]

export default routers

3、在.umirc.ts文件中引入并使用路由文件

import { defineConfig } from 'umi';
import routers from './routers'  // 只能使用 ./ 形式引入模块，@ 无法识别找到文件

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: routers,
  fastRefresh: {},
});