Ant Design Pro V5 入门指南

最新推荐文章于 2025-04-08 10:41:21 发布

逆小雨

最新推荐文章于 2025-04-08 10:41:21 发布

阅读量1.5w

点赞数 5

分类专栏： ant 文章标签： reactjs

本文链接：https://blog.youkuaiyun.com/weixin_43239457/article/details/117998550

版权

本文提供Ant Design Pro V5的入门指南，包括安装区块、运行与打包命令，解决请求携带Token的问题，讲解currentUser的设置，useModel的使用以及access权限的应用，并列举了常见问题和解决方案，如表单操作、ProSelect联动和组件样式改写。

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

一、安装及完整区块、运行、打包命令
API：
V5版：https://beta-pro.ant.design/index-cn
ProTable：https://protable.ant.design/getting-started
ProComponents：https://procomponents.ant.design/docs/intro/
Hooks：https://hooks.umijs.org/zh-CN/hooks/async

安装：yarn create umi [项目名] 
运行：yarn run start 
打包：umi build

安装完整区块（如官网方法无法安装，使用本地安装）：
• 1、自己手动下载https://github.com/ant-design/pro-blocks所有区块
• 2、将下载的文件解压拷贝到C:/Users/用户名/.umi/blocks/github.com/ant-design/pro-blocks文件夹下，没有就自己建文件夹。
• 3、在工程目录执行 yarn run pro fetch-blocks --branch=v5

二、使请求携带Token

**src/app.tsx文件修改**
export const request: RequestConfig = {
  errorHandler,
  headers: {
    Authorization: `${localStorage.getItem(token)}`,
  },
};
**service.ts文件中使用**
import { request } from 'umi';
export async function querySchedule(params: any) {
  return request('/edu/querySchedule', { params });
}

坑：V5官方代码Login组件，登录后发现请求仍不能携带token，问题在于登录后使用了history跳转，倒致一些问题。

//**src/pages/user/Login/index.tsx**
/** 此方法会跳转到 redirect 参数所在的位置 */
const goto = () => {
  if (!history) return;
  setTimeout(() => {
    const { query } = history.location;
    const { redirect } = query as { redirect: string };
    history.push(redirect || '/');
  }, 10);
};

可以改为

/** 登录后跳转到 redirect参数所在的位置 */
exp

最低0.47元/天解锁文章