umi 配置路由 独立路由文件

umi 配置路由

根据 umi ，官方文档的介绍，项目的路由写在 .umirc.ts 文件里的 routes 数组中

import { defineConfig } from 'umi';

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

如果路由较少可以集成在 .umirc.ts 文件中

遇到路由较多的情况，可以将路由文件单独提出来，

例如可以讲路由文件提出来放在 src/pages 文件下，

创建一个 routers 文件夹（文件夹名随意）下的 index.tsx 文件（.js/.ts/.tsx）

在 routers/index.tsx 文件中专门放置路由

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

const routers: IRoute[] = [
    { path: '/', component: '@/pages/index', name:'首页'},
]

export default routers

这里引入的 IRoute 是 umi 里的路由接口定义规则

export interface IRoute {
  component?: string;
  exact?: boolean;
  path?: string;
  routes?: IRoute[];
  wrappers?: string[];
  title?: string;
  __toMerge?: boolean;
  __isDynamic?: boolean;
  [key: string]: any;
}

此时在 .umirc.ts 文件里引入刚编写的路由文件
则修改成

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

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

注意 ： 只能使用 ./ 形式引入模块，@/ 无法识别找到文件

参考文献：

UmiJS 官方文档
umi怎么去添加配置式路由
关于umi 的配置式路由
umi项目路由搭建以及数据请求模式搭建
UmiJS之路由
umi 路由