学习使用react-antd-pro框架(一篇学习中的问题思考记录)

---

框架介绍

react-antd-pro 大体上等于 react + antd + pro。官网对于相关技术栈的描述如下：

我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd

UmiJS: 可插拔的企业级 react 应用框架
dva: React and redux based, lightweight and elm-style framework
g2: 一套基于可视化编码的图形语法

问题 VS 解析

1. 子路由页面刷新，面包屑导航拿不到路由信息报错
   Q: /pages/some_dir/_layout.js 刷新拿不到routes相关信息，导致breadcrumb报错
   A: routes的初始化放在*/layouts/basicLayout.js*的ComponentDidMount下，因为完成渲染的顺序是 子组件 -> 子组件模版 -> 外层模板，所以内层的componentDidMount比外层早，拿到的结果为空对象。

   解决方案：

   1. 放在外层组件(/layouts目录下)的ComponentWillMount（目前看来没有什么问题）
   2. 使用React.MenuContext的Provider和Consumer来传值（antd-design-pro采用这种做法）

2. 关于router切换的loading
   Q: 页面路由切换时，如何加载loading，优化体验
   A: 在 .umirc.js 中修改 dynamicImport 插件，支持本地loading组件。官网相关资料 / dynamicImport

3. /pages/[*]/_layout.js 的 props.children 为 Null
   A: 暂不知道原因，被问题困扰很久。结果是我把route下的routes键替换为children导致的。 :simle

---