对比以往使用的 create-react-app 搭建react项目，根据需要我们还得集合webpack打包，或者引入redux状态管理器等，而umi ---
通过 create-umi提供脚手架能力，
然后我们可以选择需要生成的项目类型：
确定后，会根据选择自动创建好目录和文件
安装依赖， yarn start 启动项目。
umi 以路由为基础的，支持类 next.js 的 约定式路由 ，以及各种进阶的路由功能，并以此进行功能扩展，比如支持 路由级的按需加载 。
(1) 无需手动配置路由
根据pages目录自动生成路由配置，会根据 src / pages 下 文件名自动生成路由
（也可以配置.umirc.js中的 routes 属性，此配置项存在时则不会对 src/pages 目录做约定式的解析）
(2) 其他基础知识：
(3)常用的路由操作
(1)全局layout
约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。
比如：
(2)不同的全局layout
可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。
比如想要针对 /login 输出简单布局:
(3)尝试
要求： 登录页和首页显示不同的布局
同样对 location.path 做区分，但是如果是动态路由或者嵌套路由这样的匹配是有漏洞的。
优化后：
配置路由对应的布局，默认使用NavigatorLayout
根据正则判断
用之前先把mock使用示例看看==>mock.js文档
(1)在umi中使用mock：
UmiJS官方文档
项目目录结构
hash
配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存
base
设置路由前缀，通常用于部署到非根目录
publicPath
配置 webpack 的 publicPath。当打包的时候，webpack 会在静态文件路径前面添加 publicPath 的值，当你需要修改静态文件地址时，比如使用 CDN 部署，把 publicPath 的值设为 CDN 的值就可以
outputPath
指定输出路径
title
配置标题
此外，你还可以针对路由配置标题，比如，
然后我们访问 / 标题是 Home ，访问 /users 标题是 Users ，访问 /foo 标题是默认的 hi
history
targets
配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换
proxy
配置代理
然后访问 /api/users 就能访问到 http://xxx.yyy.com/users 的数据
theme
routes
配置路由
最近在做项目重构的事情，原来的一个Vue项目有几十个菜单，项目大的令人发指，所以准备重构，使用了umi+qiankun的方式，子应用使用了vue和react两个类型的框架。
因为用到了umi框架，默认的路由文件统一配置在config/routers下面，并且是静态的，但是因为现在是动态添加的子应用，如果使用静态的路由文件，每次新加一个子应用，就需要修改一次主应用中的路由文件再发布一次，明显感觉不合理。因此找了一个解决动态路由的方法，也是官方的解决方案。配置的方式主要是在运行时进行，官方文件见 https://umijs.org/zh-CN/docs/runtime-config
通过以上的方式，我们就能根据后端的返回接口，动态的添加路由了，本地的路由配置文件只需要配置一些主应用常用的并且几乎不会变化的路由即可。当然不光是微应用可以使用这种方式，如果有需要的话普通的路由也可以使用这种方式进行配置，这也就省去了我们每次新加一个菜单就要更新一遍routers文件的问题。
https://blog.csdn.net/BLUE_JU/article/details/109467321
