umi学习：路由

最新推荐文章于 2025-07-07 08:54:19 发布

原创

最新推荐文章于 2025-07-07 08:54:19 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs #umi

本文介绍了umi框架中路由的使用方法，包括约定式路由、配置式路由、动态路由、参数获取、路由跳转和嵌套路由。重点讲解了3.x版本的特性，如通过[]包裹来匹配动态路由，并提供了不同方式的路由跳转示例。

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

问题导向

umi路由如何使用？如何传递参数？配置式路由如何编写？404页面？

如果你都有了答案，可以忽略本文章，或去umi学习地图寻找更多答案

注意

2.x版本和3.x版本是有一些区别的，这里使用的是3.x版本

约定式路由

重点： umi会根据src下pages的文件结构自动生成路由

可以在src下.umi文件夹 → core → routes.ts 文件中查看

如下目录
在这里插入图片描述
自动生成路由：src → .umi → core → routes.ts

const routes = [
    {
   
   
      "path": "/",
      "component": require('C:/Users/PC/Desktop/umi/src/.umi/plugin-layout/Layout.tsx').default,
      "routes": [
        {
   
   
          "path": "/",
          "component": require('@/layouts/index.js').default,
          "routes": [
            {
   
   
              "path": "/",
              "exact": true,
              "component": require('@/pages/index.js').default
            },
            {
   
   
              "path": "/user",
              "exact": true,
              "component": require('@/pages/user/index.js').default
            },
            {
   
   
              "path": "/user/:userid",
              "exact": true,
              "component": require('@/pages/user/[userid]/index.js').default
            }
          ]
        }
      ]
    }
  ];

配置路由

自己手动配置路由，不使用自动生成的路由

可以在.umirc.ts中的routes 写，也可以抽离

import {
   
    defineConfig } from 'umi';
const route = require('./src/routes'

最低0.47元/天解锁文章

200万优质内容无限畅学