react-umi 光速上手

搭建项目

• npx @umijs/create-umi-app 创建项目
• npm run start 运行项目

核心路由

　目录位置

• 只修改pages文件夹下文件即可，路由自动生成
• 组件另行建立component文件夹存放，不要写在pages里面，理由你们应该也懂
• 这个umi最好是先建立好所有路由文件再写内容，不然会有点麻烦

   路由

1. 要想让框架自动识别路由，就删除src下的.umirc.ts里面的routers，然后重启项目即可
2. 子路由嵌套
• 建立文件夹，文件夹命名就是路由父级名称
• 文件夹内建立一个_layout.tsx文件，这个文件就是父级路由内容
• 文件夹内所有其他文件都是这个_layout.tsx的子集文件
• 在_layout.tsx内写{this.props.children}就可以渲染子文件内容了
3. 路由守卫
• wrappers:[] 数组内写路径
• 在路径文件里面直接抛出一个方法，里面写逻辑
• 如果权限判断非，使用redirectTo()方法进行重定向
• 如果权限判断是，可以直接返回<div>{props.children}</div>
4. 路由跳转
• 引入history从umi里 使用方法跟原生react方法一样
• 引入Link从umi里 使用方法也跟原生一样 to=‘’ 进行跳转
5. 路由api
• <Prompt /> 
  • 属性 message  确认离开 参数可以是函数或字符串
  • location => return location.pathname !== '' / " ? true : `确定离开去首页么`
  • 属性 when 确认当前用户状态判断是否给予提示框 （一般用在表单填写中
• 其他的都是些无关紧要的东西，想了解可以移步官方文档

umi样式

1. umiJS会自动识别CSS Modules 的使用，只有你把它当做CSS Modules 用时才是 CSS Modules
• 想了解CSS Modules是什么的可以看我文档
• https://www.cnblogs.com/lrqcx/p/12821588.html
• 也可以去查看阮一峰大神的文档
2. umiJS内置支持 less，不支持sass跟stylus，有需求可以通过配置 chainWebpack或者 umi插件的形式支持