使用umi中碰到的一些小问题/技巧

最新推荐文章于 2025-05-16 16:06:50 发布

蓝枫秋千

最新推荐文章于 2025-05-16 16:06:50 发布

阅读量8.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： umi 小tips

本文链接：https://blog.csdn.net/qq_43382853/article/details/103916542

小tips 同时被 2 个专栏收录

39 篇文章

订阅专栏

umi

13 篇文章

订阅专栏

本文详细介绍了Umi框架的标准项目目录结构，包括关键文件夹和文件的作用，页面路由跳转及参数传递方法，如何使用TS避免编译警告，解决antd表单校验绑定value的问题，以及实现路由守卫、元素多类名添加、修改浏览器标签页图标和名称等实用技巧。

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

标准项目目录结构

	.
	├── dist/                          // 默认的 build 输出目录
	├── mock/                          // mock 文件所在目录，基于 express
	├── config/
	    ├── config.js                  // umi 配置，同 .umirc.js，二选一
	└── src/                           // 源码目录，可选
	    ├── layouts/index.js           // 全局布局
	    ├── pages/                     // 页面目录，里面的文件即路由
	        ├── .umi/                  // dev 临时目录，需添加到 .gitignore
	        ├── .umi-production/       // build 临时目录，会自动删除
	        ├── document.ejs           // HTML 模板
	        ├── 404.js                 // 404 页面
	        ├── page1.js               // 页面 1，任意命名，导出 react 组件
	        ├── page1.test.js          // 用例文件，umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
	        └── page2.js               // 页面 2，任意命名
	    ├── global.css                 // 约定的全局样式文件，自动引入，也可以用 global.less
	    ├── global.js                  // 可以在这里加入 polyfill
	    ├── app.js                     // 运行时配置文件
	├── .umirc.js                      // umi 配置，同 config/config.js，二选一
	├── .env                           // 环境变量
	└── package.json

页面路由跳转传参

// 传递参数
<Link to={{pathname:`/breakpromise-manager/${record.id}/detail`,state:{typeId:record.orgType}}}>{text}</Link>
// 页面接收参数
let orgType = this.props.location.state.typeId;

使用TS时编译器报警告: 并非所有路径都有返回值

比如说: 你可以看一下你是不是写了分支语句, 是不是每一个结果都有`return`

使用antd的表单校验不能绑定value

render方法代码

<Form.Item label="企业名称">
  {getFieldDecorator('bussinessName', {
    rules: [{ required: true, message: '请输入企业名称!' }],
  })(
    <Input
      placeholder="请输入企业名称"
      onChange={(e) => this.inputOnChange('bussinessName', e.target.value)}
    />,
  )}
</Form.Item>

inputOnChange方法代码(在这里改变state)

inputOnChange = (type: string, value: any) => {
  this.setState({
    [type]: value
  })
}

表单校验封装好的方法,能用来初始化input中的值

this.props.form.setFieldsValue({
  bussinessName: bussinessInfo.bussinessName, // 企业名称
})

路由守卫的使用

路由守卫组件的路径相对于项目根目录，且后缀名不能省略；
在项目根目录下创建routes目录，用于存放路由守卫组件；
/routes/PriviteRoute.js中编写如下代码

    import Redirect from 'umi/redirect'
    export default function(props) {
        if(Math.random()>0.5) {
            return <Redirect to="/login" /> //没有登录时，重定向到登录页
        }
        //登录成功时，显示子路由的页面组件
        return <div>{props.children}</div>
    }

创建登录页umi g page login
在config/config.js中配置/login，并守卫/about
注意: 有可能你的路由配置不是在这里,看你自己在哪里了

    routes: [
        { path: "/login", component: "./login" },
        { 
            path: "/about", 
            component: "./about",
            Routes: ["./routes/PriviteRoute.js"]  //路由守卫
        },
        ......
    ]

这样的话就会在访问/about之前先去路由守卫的文件中寻找去哪一个路由了

为元素添加多个类名：

className={`${styles.className1} ${styles.className2}`}

修改浏览器标签页的图标和名称
位置在/src/pages/document.ejs文件的title和link标签

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>筑商</title>
    <link rel="icon" href="/icons/leftLogo.png" type="image/x-icon" />
</head>

但是这个时候名称右边又有一个短横杠
在这里插入图片描述

到/config/defaultSettings.ts文件中加上title
在这里插入图片描述

效果如图

页面内嵌子路由

背景：当我们想要在一个页面内渲染不同的路由，同时在左边菜单导航中和浏览器url中能够显示为不同的路由
效果如图
在这里插入图片描述
1. 建立好相关页面和目录层级关系

2. 在当前页面引入props中的children，然后找一个地方能够渲染子路由的地方

3. 在路由配置页面进行子路由的配置