react-umi 光速上手

Posted 2021-02-20 lrqcx

搭建项目

• 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. 1
6. 1
7. 11
8. 1