umi:配置式路由

最新推荐文章于 2025-05-16 14:23:51 发布

原创最新推荐文章于 2025-05-16 14:23:51 发布 · 5.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#typescript #reactjs

mui 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了如何在Umi框架中实现配置式路由，包括如何动态设置routes，通过模块化管理路由，以及在`.umi`配置文件和路由管理文件中的具体操作。重点讲解了组件路径的书写规则和webpack alias的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景描述

很多时候，我们需要做到简单的路由拦截，比如用户未登录的时候，我们需要跳转到登录页面，等到用户登录后在重新跳转到之前的页面，而很多情况下这些是约定式路由无法完成的，就需要我们配置式路由

论述

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;
}