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 路由