umi学习：路由

最新推荐文章于 2025-04-22 13:56:50 发布

大神乔伊

最新推荐文章于 2025-04-22 13:56:50 发布

阅读量2.8k

点赞数

分类专栏： umi react 文章标签： reactjs umi

本文链接：https://blog.csdn.net/weixin_44828005/article/details/117092533

版权

本文介绍了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 =

最低0.47元/天解锁文章