大家好，感谢邀请，今天来为大家分享一下深入浅出React系列教程第六篇：Ant Design组件库详解的问题，以及和的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
前言
上一篇文章介绍了如何结合React+CRA+TS+Ant Design来高效开发前端，但对于习惯基于开源方案开发的人来说，从头开始构建肯定会费时费力。
本文将介绍一个开源解决方案Ant Design Pro，它是基于Ant Design和React的企业级中后端前端/设计解决方案。封装了很多常用的中后端页面和功能，适合快速构建企业级应用。
Ant Design Pro 是基于Ant Design 和umi 封装的一套完整的企业级中后端前端/设计解决方案。致力于在设计规范和基础组件的基础上持续构建，细化典型模板/业务组件/支撑设计。资源，进一步提升“用户”和“设计师”在企业级中后端产品设计开发过程中的体验。
1. 主要特性
提供开箱即用的管理系统框架，帮助开发者快速构建中后端应用。
丰富的页面模板：
Ant Design Pro 提供了多种常用的页面模板，帮助开发者快速构建中后端应用。登录/注册页面：用于用户认证。仪表板：显示关键数据和统计数据。列表页：显示和操作数据列表。详情页：显示单个数据项的详细信息。编辑页面：提供数据的添加、删除、修改、查看功能。强大的布局系统：
支持多种布局方案，方便开发者根据需要调整页面布局。 Ant Design Pro 支持多种布局方案，包括顶部导航、侧边导航、混合导航等，开发者可以根据自己的需求选择或自定义布局。权限管理：
内置权限管理机制，通过配置权限模型可以实现基于角色的访问控制。结合路由和菜单配置，可以轻松实现不同角色的权限管理。国际支持：
内置国际化解决方案，支持多语言切换。使用react-intl进行国际化配置。开发者可以配置语言包来实现多语言切换。最佳实践：
Ant Design Pro包含了许多企业级应用开发的最佳实践，例如代码规范、目录结构、状态管理、网络请求、Mock数据等。高度可定制：
提供丰富的配置选项，允许开发者根据项目需求进行定制。
2. 创建项目
您可以通过官方脚手架工具@ant-design/pro-cli快速创建Ant Design Pro项目：
安装pro-clinpm i @ant-design/pro-cli -g 创建项目springboot_frontend_adppro create springboot_frontend_adp 安装过程中会询问是安装简单版还是完整版。
Simple：是一个基础模板，只提供框架操作的基本内容。完整：包含所有块，不适合作为基础模板进行二次开发。完整的还是简单的脚手架？ （使用箭头键）
简单的
为了体验更多的功能，我选择了这里的完整版。
4. 目录结构
创建后，会在当前目录下生成项目目录springboot_frontend_adp。进入这个目录，你会看到一个典型的Ant Design Pro 项目目录结构：
springboot_frontend_adp
配置
嘲笑
公共
来源
资产
组件
e2e
布局
语言环境
型号
页数
服务
实用工具
app.tsx
全局.less
全局.ts
defaultSettings.ts
打字.d.ts
测试
.eslintrc.js
.gitignore
.prettierrc.js
配置.ts
jest.config.js
tsconfig.json
package.json
yarn.lock
5. 运行项目
创建项目后，可以使用以下命令运行项目：
cd springboot_frontend_adp
纱
Yarn start 已准备好编译和运行。完成后，会出现以下提示。
信息- [MFSU] 恢复缓存
应用程序在： 收听
本地： http://localhost:8000
就绪- 网络： http://192.168.1.3:8000
现在就可以用上面的地址打开浏览器了
5. Uncaught Error解决
按照提示，在浏览器中打开：http://localhost:8000
如果没有其他问题，您打开的页面会继续加载，然后提示异常。按F12，你会看到如下路由信息错误。
未捕获的Error: 嵌套在路径“/user”下的绝对路由路径“/*”无效。绝对子路由路径必须以其所有父路由的组合路径开始。
错误
解决办法
按照提示操作
嵌套在路径“/user”下的绝对路由路径“/*”无效。看来"/user"下的路由路径"/"没有问题。我们尝试一下注释掉它并尝试一下。进入文件config/routees.ts 找到/user 下的subroute/并将其注释掉
导出默认[
{
路径： "/用户",
布局：假，
路线： [
{
path: "/用户/登录",
布局：假，
name: "登录",
component: "./用户/登录",
},
{
路径： "/用户",
redirect: "/用户/登录",
},
{
name: "注册结果",
icon: "微笑",
path: "/用户/注册结果",
component: "./用户/注册结果",
},
{
name: "注册",
icon: "微笑",
path: "/用户/注册",
component: "./用户/注册",
},
//就是这样，注释掉
//{
//组件："404",
//路径："/*",
//},
],
},
关于本次深入浅出React系列教程第六篇：Ant Design组件库详解和的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。
【深入浅出React系列教程第六篇：Ant Design组件库详解】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
这篇文章终于来了！一直想学习Ant Design，React结合起来应该很强大。
有10位网友表示赞同！
终于来写 React + Ant 了！之前一直在用其他的框架，想尝试一下这个组合搭配。
有7位网友表示赞同！
我是前端新接触者，感觉Ant Design 挺好用的，这篇文章正好解惑我一些问题。
有9位网友表示赞同！
期待看到如何在 React 中使用 Ant 的各种组件，上手起来多方便啊！
有7位网友表示赞同！
希望可以讲解一下 Ant 中复杂的逻辑，比如如何自定义主题和样式？
有9位网友表示赞同！
文章里会不会有实战案例演示？我更喜欢看实际应用场景。
有12位网友表示赞同！
最近在学习 React，遇到不少组件库，Ant Design 感觉挺专业的样子。
有20位网友表示赞同！
前几次的 React 教程都看过，期待这篇文章继续深入了解前端开发。
有10位网友表示赞同！
之前用 Ant 就觉得 React 开发体验很好，希望能看到更多进阶技巧分享。
有8位网友表示赞同！
有没有专门针对移动端的教程？想在手机上开发应用。
有13位网友表示赞同！
学习 Ant Design 的文档有时候感觉太专业了，这篇文章能更通俗易懂吗？
有6位网友表示赞同！
Ant Design 组件的布局好强大，希望能了解一下如何灵活调整页面结构。
有9位网友表示赞同！
这篇文章里会不会有关于 Ant Design 的性能优化技巧？
有8位网友表示赞同！
之前用过一些其他前端框架，感觉 React + Ant Design 很有潜力。
有12位网友表示赞同！
希望作者分享一些实战经验，比如遇到哪些问题和解决方案。
有18位网友表示赞同！
我一直想尝试使用一些高质量的前端组件库，Ant Design 看起来很不错！
有10位网友表示赞同！
学习前端开发真的很烧脑，但这个教程看起来很有吸引力。
有8位网友表示赞同！
期待作者能分享更多关于 Ant 设计理念和开发思路的讲解。
有14位网友表示赞同！
最近想找一些优质的前端资源，这篇文章正好符合我的需求！
有20位网友表示赞同！