ant design pro 代码学习(二) ----- 路由数据分析_夕阳枫的博客-CSDN博客_ant design pro源码解析
ant design pro 代码学习(二) ----- 路由数据分析
夕阳枫
于 2018-06-19 18:16:23 发布
5877
收藏
分类专栏：
react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcs425171513/article/details/80737431
版权
react
专栏收录该内容
21 篇文章
3 订阅
订阅专栏
本章节包含路由信息(common/router)、侧边栏菜单信息(common/menu)、基本路由（一级路由）UserLayout组件，BasicLayout组件、以及侧边栏SiderMenu组件中对数据的处理。主要涉及到以下几个方法，分别逐个分析其功能。
备注：本文中代码部分只截取涉及到的相关代码，完整代码请查看ant design Pro官方代码。
1、getMenuData：获取菜单配置数据
对common/menu.js中定义的menuData数据做处理，如果path不是含有http的链接，即将path设置为完整的相对路径（即父菜单的路径 + 子菜单的路径），并获取当前菜单的权限，如果没有权限值，则继承父菜单的权限。其他相关属性（name、hideInMenu等）保持不变。
function formatter(data, parentPath = '/', parentAuthority) {
return data.map(item => {
let { path } = item;
if (!isUrl(path)) {
path = parentPath + item.path;
const result = {
...item,
path,
authority: item.authority || parentAuthority,
};
if (item.children) {
result.children = formatter(item.children, `${parentPath}${item.path}/`, item.authority);
return result;
});
export const getMenuData = () => formatter(menuData);
2、getFlatMenuData
由1可知，menuData经过getMenuData()处理之后，path已经变成了完整的相对路径，getFlatMenuData主要是对getMenuData()的数据做处理。有如下使用方式， getFlatMenuData有两个作用：
将getMenuData()的结果（Array）转换成以path为key的对象数据（Object）；通过递归调用，将getMenuData()的结果的父子层级结构的数据处理为平行数据。
方法引用：
const menuData = getFlatMenuData(getMenuData());
方法定义：
function getFlatMenuData(menus) {
let keys = {};
menus.forEach(item => {
if (item.children) {
keys[item.path] = { ...item };
keys = { ...keys, ...getFlatMenuData(item.children) };
} else {
keys[item.path] = { ...item };
});
return keys;
3、 getRouterData：获取路由数据
综合1、2可知，处理后的menuData是以path为key的Object，其中value为对应的菜单项配置。其中routerConfig为项目的路由配置，具体参看源代码。
循环遍历routerConfig：
当路由的path能在menuData中找到匹配（即菜单项对应的路由），则获取菜单项中当前path的配置menuItem；获取当前path的路由配置router；返回最新路由信息，name、authority、hideInBreadcrumb三个属性如果router中没有配置，则取菜单项中的配置。
export const getRouterData = app => {
const routerConfig = {...};
const menuData = getFlatMenuData(getMenuData());
const routerData = {};
Object.keys(routerConfig).forEach(path => {
const pathRegexp = pathToRegexp(path);
const menuKey = Object.keys(menuData).find(key => pathRegexp.test(`${key}`));
let menuItem = {};
if (menuKey) {
menuItem = menuData[menuKey];
let router = routerConfig[path];
router = {
...router,
name: router.name || menuItem.name,
authority: router.authority || menuItem.authority,
hideInBreadcrumb: router.hideInBreadcrumb || menuItem.hideInBreadcrumb,
};
routerData[path] = router;
});
return routerData;
};
4、getRoutes：获取一级路由对应的路由数据
用于获取当前路径对应的路由数据。共有几处使用该方法：
组件名称match.path父组件BasicLayout/–UserLayout/user–StepForm/form/step-formBasicLayoutSearchList/list/searchBasicLayout
方法使用
{getRoutes(match.path, routerData).map(item => (...))}
首先获取所有以path开头且路由不等于path的路由数据routes。getRenderArr(routes)对路由数据进行操作，过滤掉包含关系的路由。
例如：当path=’/‘时，’/list/search’、’/list/search/projects’、’/list/search/applications’、 ‘/list/search/articles’。这个四个路由信息存在包含关系。getRenderArr方法会将后三个过滤掉。渲染路由时，只生成’/list/search’对应的组件，也即SearchList。同时在SearchList中，调用getRoutes时，传入path=’ /list/search’，会从routerData筛选出’/list/search/projects’、’/list/search/applications’、 '/list/search/articles’这个三个路由的数据，并生成对应的Route组件。此处/list/search可以理解为生成一个三级路由。
方法定义
export function getRoutes(path, routerData) {
let routes = Object.keys(routerData).filter(
routePath => routePath.indexOf(path) === 0 && routePath !== path
);
routes = routes.map(item => item.replace(path, ''));
const renderArr = getRenderArr(routes);
const renderRoutes = renderArr.map(item => {
const exact = !routes.some(route => route !== item && getRelation(route, item) === 1);
return {
exact,
...routerData[`${path}${item}`],
key: `${path}${item}`,
path: `${path}${item}`,
};
});
return renderRoutes==;==
该处源码存在两个小问题：
当path=’/'时，当前进入了BasicLayout组件，getRoutes会返回含有/user的路由信息，会生成一个无效的路由？因为当路由为/user时，在一级路由的时候，已经被匹配了，就已经进入UserLayout，所以不可能在BasicLayout中出现匹配/user；过滤路由包含关系时，依赖其他routerConfig中出现的顺序，如上例，若调换’/list/search’、’/list/search/projects’在routerConfig中的顺序，则会出现404错误。因为此时/list/search/projects中不存在生成三级路由的代码。因此无法匹配路由，会出现404错误。此处需要注意路由配置的位置关系；
5、 getPageTitle：获取当前url对应的页面title
此方法在UserLayout、BasicLayout组件中均有使用，通过获取路由信息中的name属性，动态的修改页面的title显示。其中DocumentTitle引用’react-document-title’。
方法引用：
<DocumentTitle title={this.getPageTitle()}>
...
</DocumentTitle>
方法定义：
getPageTitle() {
const { routerData, location } = this.props;
const { pathname } = location;
let title = 'Ant Design Pro';
if (routerData[pathname] && routerData[pathname].name) {
title = `${routerData[pathname].name} - Ant Design Pro`;
return title;
6、 getBashRedirect：BasicLayout下路由重定向
此方法在BasicLayout组件中使用，用来设置路由为’/'时，重定向的路径。
方法引用：
// BasicLayout.js
const bashRedirect = this.getBashRedirect();
...
<Content style={{ margin: '24px 24px 0', height: '100%' }}>
...
<Redirect exact from="/" to={bashRedirect} />
<Route render={NotFound} />
</Switch>
</Content>
方法定义：
// BasicLayout.js
getBashRedirect = () => {
const urlParams = new URL(window.location.href);
const redirect = urlParams.searchParams.get('redirect');
// Remove the parameters in the url
if (redirect) {
urlParams.searchParams.delete('redirect');
window.history.replaceState(null, 'redirect', urlParams.href);
} else {
const { routerData } = this.props;
// get the first authorized route path in routerData
const authorizedPath = Object.keys(routerData).find(
item => check(routerData[item].authority, item) && item !== '/'
);
return authorizedPath;
return redirect;
};
首先，获取url中redirect参数，这里的参数指的是url中search参数，而并非hash参数。如下例所以，第一个url能即为search参数，第二个url即为hash参数。
http://localhost:8000/?redirect=/result/successhttp://localhost:8000/#/?redirect=result/success
其次，判断是否有redirect参数，若有则将调用window.history.replaceState无刷新状态下更改url为localhost:8080/#/,也即路由为’/’，并返回redirect参数；如没有redirect参数，则返回路由信息中第一个已认证的路由，其中routerData是以路径(path)为key的路由集合
综上所述，当路由path=’/'时，url中含有redirect参数时，重定向到redirect对应的路由组件；当不含redirect参数时，重定向到第一个已认证的路由组件。
7、 路由数据流程图
上一篇：ant design pro 代码学习(一) ----- 路由分析 下一篇：ant design pro 代码学习(三) ----- 菜单数据分析
夕阳枫
关注
关注
点赞
收藏
打赏
评论
ant design pro 代码学习(二) ----- 路由数据分析
本章节包含路由信息(common/router)、侧边栏菜单信息(common/menu)、基本路由（一级路由）UserLayout组件，BasicLayout组件、以及侧边栏SiderMenu组件中对数据的处理。主要涉及到以下几个方法，分别逐个分析其功能。 备注：本文中代码部分只截取涉及到的相关代码，完整代码请查看ant design Pro官方代码。1、getMenuData...
复制链接
扫一扫
专栏目录
问题： 如何根据后台返回的id值，获取本地菜单对应的数据，创建动态的菜单呢？
never。❀的博客
05-11
154
遇到的问题：
如何根据后台返回的id值，获取本地菜单对应的数据，创建动态的菜单呢？
解决思路：
1、将本地菜单数据构建平级数组。
2、构建所需的菜单数组。
3、创建所需的节点树。
解决方法：
1、本地的菜单数据，getMenuData
"code":"000000",
"msg": "成功",
"data":[
"id":1,
"parentId":null,
..
antdesign-pro
03-19
蚂蚁设计专业版
该项目已使用初始化。遵循是如何使用的快速指南。
环境准备
安装node_modules ：
npm install
或者
yarn
提供的脚本
Ant Design Pro提供了一些有用的脚本，可帮助您快速启动和构建Web项目，代码样式检查和测试。
package.json提供的脚本。修改或添加其他脚本是安全的：
开始项目
npm start
建立项目
npm run build
检查代码样式
npm run lint
您还可以使用脚本自动修复某些皮棉错误：
npm run lint:fix
测试码
npm test
更多的
您可以在我们的上查看完整文档。并欢迎在我们的任何反馈。
参与评论
您还未登录，请先
登录
后发表或查看评论
AntDesignPro快速入门
最新发布
qq_40098572的博客
11-04
328
项目创建好了，打开一看，这么多目录无从入手啊，然后看官方文档，又要去了解umi，又要去了解typescript，等等各种前置条件，其实都没有必要，那么多东西如果不是职业前端开发的话怎么可能都会呢，这是不可能的。学习代码很简单，找对思路是关键，当我们看到一个项目的时候，总想着打开项目看一下代码，一看代码两眼发黑，互联网时代不可能把认识所有代码，当我们接触一个项目的时候，先看项目目录结构，对着目录结构写一套增删查改就算是入门了。安装环境node+vscode。整个项目介绍完毕，是不是很简单。
antdPro动态路由
BobbleHat的博客
05-22
6031
因为项目需要依据后端返回条件动态显示路由，通宵研究了一整个晚上搞出来的比较简单的实现方式
原理
antdPro用的是umi的路由，大体的实现方式是这样的：
router.config.js =>.umi/router.js => models/menu.js<=>layouts/BasicLayout.js => compone...
如何利用Python和win32编程避免重复性体力劳动（二）——菜单操作：GetMenu，GetSubMenu，GetMenuItemID以及wParam的HIWORD&LOWORD
热门推荐
游走的psychiatrist
12-25
1万+
Part 2：菜单操作
有了句柄，我们就可以操作FaceGen了！嗯，要先打开文件，File→Open，然后再File→Save Image（很悲剧，Save Image没有快捷键，所以不得不进行菜单操作）。现在我们有了FindWindow和FindWindowEx，要怎么操作菜单呢？
哦，抱歉，靠他俩还做不到。
窗口的菜单就像窗口的标题栏一样，是窗口自身的一部分，不是其他窗体控件，也就没有
【日常笔记】datatables表格数据渲染
weixin_30279751的博客
05-20
335
现在有很多表格渲染方式 这里只是记录怎么使用datatables渲染数据
使用datatables可以更方便的来渲染数据
【中文api】http://datatables.club/index.html
在datatables中获取后台自定义的键值对：
initComplete: function (settings,data) {
// settings中有个json属性 可...
antDesignPro区块源码学习
withwz的博客
09-16
1171
1.MVC分层
在antDesignPro区块组件中，看不到state，全部被放到了model中去了，page页面只管显示交互，数据全部都在model中。通过connect来将page和model关联。
2.@connect修饰符
antDesignPro中个人中心区块代码说明
@connect修饰符(类似java中注解)
第一个回调函数作用：将page层和model层进行链接，返回model层...
ant models 内获取 url 的参数传递到组件
a_靖的博客
05-22
1296
models代码：
import { getCList} from "@/services/api";
import { MessageTip } from '@/utils/tools.js'
import { router } from 'umi';
const customerModel = {
namespace: 'customerModel',
state: {
channelList: [], // 渠道列表
},
reducers: {
Ant-design 源码分析之数据展示（一）Avatar
qq_37588125的博客
10-07
1128
Ant-design 源码分析之数据展示（二）Avatar
2021SC@SDUSC
一、组件结构
1、ant代码结构
2、rc-ant代码结构
2.1、rc-util代码结构
2.2、rc-resize-observer代码结构
3、组件结构
ant中avatar的index.tsx中引入了avatar和group
avatar中引用rc-resize-obsever做API。
二、antd组件调用关系
1、avatar.tsx
导入相应模块以及相应的ICON图标
import * as Reac
ant design pro之带参数的路由
zh0623的博客
03-25
2980
脚手架默认支持带参数的路由，但是在菜单中显示带参数的路由需要在代码中自行处理
path: '/dashboard/:page',
hideInMenu:true,
name: 'analysis',
component: './Dashboard/Analysis',
},
通过以下代码来跳转到这个路由:
import router from 'umi/router'...
ant design pro Vue 页面传接参数
LDR1109的博客
05-18
823
最近在用 ant design pro Vue，发现连传参都是问题，之前完全没有接触过vue，搞了半天，这里做下记录！
list.vue - 传递参数
----------------------
<div class="card-meta" @click="toDetailDoctor(item.Id)">
</div>
<script>
toDetailDoctor (Id) {
console.log(Id)
this.$router.push({ .
ant design pro 代码学习(三) ----- 菜单数据分析
夕阳枫的博客
06-26
5268
1、getSelectedMenuKeys 获取选中的菜单的key
getSelectedMenuKeys = () =&amp;amp;amp;amp;gt; {
const {location: {pathname}} = this.props;
return getMeunMatchKeys(this.flatMenuKeys, urlToList(pathname));
};
get...
ant desin pro v4 从服务器获取菜单，js版，非typeScript
aSuncat
10-23
1661
2019年10月23日：
网上一直找不到ant design pro v4版本从服务器获取菜单的完整代码，官网文档也太粗略，于是写了这篇文章。
一、BasicLayout.js
1、标签ProLayout增加属性
const { dispatch, children, settings, menuData } = props;
......
// menuDataRender={menuDataR...
详解三种Menu——通俗易懂
qq_37687466的博客
05-03
3065
MenuMenu分类选项菜单（OptionMenu）Step 1 在res创建menuStep 2 创建option.xmlStep 3 MainActivity中加载menu特殊属性测试结果上下文菜单（ContextMenu）Step 1 创建context.xmlStep 2 注册Step 3 创建onCreateContextMenuStep 4 创建onCreateOptionsMen...
iview-admin 学习 02 动态路由
无为萌新
04-22
407
参考https://blog.51cto.com/hequan/2383130
1.src/api/setting.js 添加获取菜单树axios
//chenlf 获取左侧菜单数
export const getMenuData = () => {
return axios.request({
url: '/permission/menu',
method: 'post'...
java中menu用法_Android Menu用法全面讲解
weixin_36246029的博客
02-16
1387
说明：本文只介绍Android3.0及以上的Menu知识点。菜单的分类菜单是Android应用中非常重要且常见的组成部分，主要可以分为三类：选项菜单、上下文菜单/上下文操作模式以及弹出菜单。它们的主要区别如下：选项菜单是一个应用的主菜单项，用于放置对应用产生全局影响的操作，如搜索/设置。上下文菜单是用户长按某一元素时出现的浮动菜单。它提供的操作将影响所选内容，主要应用于列表中的每一项元素(如长按列...
ant design pro 跨页面传参
YiShiWenYan
03-03
2618
1、routerRedux方式
import { routerRedux } from 'dva/router';
//页面跳转+参数
goOrder (record){
this.props.dispatch(routerRedux.push({
pathname: '/giveData/queryOrder',
params: record.userId
...
Ant design pro (九) 修改Title 图标等小功能
听我一言的博客
09-25
2477
一. 关于界面菜单及整体颜色风格修改
1. 直接修改
config/defaultSettings.ts 内部直接修改
2. 辅助修改
Ant Design Pro预览界面
在预览界面中选择设置好之后将设置好的配置加到/修改 config/defaultSettings.ts 文件
1) 打开配置页面
2) 按照自己的想法进行配置
3）拷贝配置即可
拷贝内容
“primaryColor”: “#13C2C2”,
“navTheme”: “dark”,
“layout”: “top”,
“con
Ant Design Pro 跳转路由 传参数，接收参数
a_靖的博客
11-26
6165
umi/link
通过声明的方式做路由跳转。
例子：
import Link from 'umi/link';
export default () => {
<div>
/* 普通使用 */
<Link to="/list">Go to list page</Link>
/* 带参数 */
<Link ...
vue递归动态加载菜单
长春小佛爷的博客
04-13
621
/**
* 静态路由懒加载
* @param view 格式必须为 xxx/xxx 开头不要加斜杠
* @returns
*/
export const loadView = (view) => {
return (resolve) => require([`@/views/${view}.vue`], resolve)
export function GetMenuData(menuRouters,data){
if(data=='' ||data==unde.
“相关推荐”对你有帮助么？
非常没帮助
没帮助
一般
有帮助
非常有帮助
提交
©️2022 CSDN
皮肤主题：创作都市
设计师：CSDN官方博客
返回首页
夕阳枫
CSDN认证博客专家
CSDN认证企业博客
码龄11年
暂无认证
41
原创
5万+
周排名
12万+
总排名
11万+
访问
等级
1500
积分
103
粉丝
45
获赞
26
评论
100
收藏
私信
关注
热门文章
ant design pro 代码学习(一) ----- 路由分析
15742
ant design pro 代码学习(七) ----- 组件封装（登录模块）
11605
ant design pro 代码学习(四) ----- 数据mock
7922
在WebStorm中调试NodeJS代码
7746
IE8 兼容性问题总结
6399
分类专栏
Vue
2篇
react
21篇
JavaScript
23篇
其他
10篇
最新评论
基于UmiJs开发移动端的自适应配置方案
dongcer:
完整的配置能发一下嘛
ant design pro 代码学习(一) ----- 路由分析
周大侠啊:
请教下，这个 routerData 是在哪块放入props里的 呢，找了半天没找到
file类型的输入框，样式不可修改的解决方法
杰仔有123:
哥，不知道为什么我的不成功，我是直接复制的，哥
基于Umi搭建的个人Dva脚手架(一) - 框架说明
ailinyingai:
点赞
ant design pro 代码学习(一) ----- 路由分析
夕阳枫
回复
aSuncat:
pro的版本一直有升级的，你看看是不是版本不一致的原因
您愿意向朋友推荐“博客详情页”吗？
强烈不推荐
不推荐
一般般
推荐
强烈推荐
提交
最新文章
Vue 2.0 源码分析
靜下心来--重温正则表达式（二）
靜下心来--重温正则表达式（一）
2022年3篇
2021年1篇
2020年7篇
2019年8篇
2018年11篇
2017年4篇
2016年11篇
目录
目录
分类专栏
Vue
2篇
react
21篇
JavaScript
23篇
其他
10篇
目录
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
打赏作者
夕阳枫
你的鼓励将是我创作的最大动力
¥2
¥4
¥6
¥10
¥20
输入1-500的整数
余额支付
(余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付
您的余额不足，请更换扫码支付或充值
打赏作者
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额
抵扣说明：
1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。 2.余额无法直接购买下载，可以购买VIP、C币套餐、付费专栏及课程。
余额充值