场景描述
很多时候,我们需要做到简单的路由拦截,比如用户未登录的时候,我们需要跳转到登录页面,等到用户登录后在重新跳转到之前的页面,而很多情况下这些是约定式路由无法完成的,就需要我们配置式路由
论述
umi自带的约定式路由,可以自动的生成路由文件(运行时,生成.umi/core/router.ts中),而使用约定式路由的时候,不需要我们在.umirc.ts中去添加route项,相反,也就是说,如果我们要启用配置式路由的时候,我们需要动态的去配置routes项,如下
import { defineConfig } from 'umi';
import routes from './src/routers/index';
export default defineConfig({
routes: routes,
nodeModulesTransform: {
type: 'none',
},
dva: {
immer: true,
hmr: false,
},
antd: {
compact: true,
},
chainWebpack(config) {
},
});
在上面的代码中,配置了使用routes,而文件的引入,为求方便,一般都是额外抽一个文件出来,专门用于路由的管理
该文件的代码如下:
import user from './user';
const router = [{ exact: true, path: '/', redirect: '/info' }, ...user];
export default router;
由于有不同的模块,所以这儿式采用不同模块的方式引入,这样比较方便管理,下面用user模块作为例子
const userRouter = [
{
path: '/register',
exact: true,
component: '@/pages/user/register/index.tsx',
},
{
path: '/info',
exact: true,
component: '@/pages/user/info/index.tsx',
},
];
export default userRouter;
这儿需要注意的几点是:第一,虽然页面都是放在user目录下,但是两个都是属于一级路由,不要搞混了。第二,在写组件路径的时候,有两个注意点,一个是根据pages文件夹去确定文件的路由。另一个是注意写上你文件的格式,为何,因为最后生成路由的时候,都是require引入,所以最好写上完整一点的,加上文件后缀(当然,不加的话umi也会自动帮你补全,为了新手看起来清楚点,我这儿就把他加上去,后面的博客就会删除掉),最后,@/pages/xxx是webpack的alias配置,不懂的不做出回答
最后生成的路由文件
// @ts-nocheck
import React from 'react';
import { ApplyPluginsType } from 'D:/workspace/umiBlock/node_modules/_@umijs_runtime@3.2.24@@umijs/runtime';
import * as umiExports from './umiExports';
import { plugin } from './plugin';
export function getRoutes() {
const routes = [
{
"exact": true,
"path": "/",
"redirect": "/info"
},
{
"path": "/register",
"exact": true,
"component": require('@/pages/user/register/index.tsx').default
},
{
"path": "/info",
"exact": true,
"component": require('@/pages/user/info/index.tsx').default
}
];
// allow user to extend routes
plugin.applyPlugins({
key: 'patchRoutes',
type: ApplyPluginsType.event,
args: { routes },
});
return routes;
}
其次,关于路由拦截还有二级路由的,下回再补充
备注
ts以及js都是类似的环境,文件也没多大变化,具体可以看文档,文件也都是那么几个
资料来源
umi-路由文档