标准项目目录结构
.
├── dist/ // 默认的 build 输出目录
├── mock/ // mock 文件所在目录,基于 express
├── config/
├── config.js // umi 配置,同 .umirc.js,二选一
└── src/ // 源码目录,可选
├── layouts/index.js // 全局布局
├── pages/ // 页面目录,里面的文件即路由
├── .umi/ // dev 临时目录,需添加到 .gitignore
├── .umi-production/ // build 临时目录,会自动删除
├── document.ejs // HTML 模板
├── 404.js // 404 页面
├── page1.js // 页面 1,任意命名,导出 react 组件
├── page1.test.js // 用例文件,umi test 会匹配所有 .test.js 和 .e2e.js 结尾的文件
└── page2.js // 页面 2,任意命名
├── global.css // 约定的全局样式文件,自动引入,也可以用 global.less
├── global.js // 可以在这里加入 polyfill
├── app.js // 运行时配置文件
├── .umirc.js // umi 配置,同 config/config.js,二选一
├── .env // 环境变量
└── package.json
页面路由跳转传参
// 传递参数
<Link to={{pathname:`/breakpromise-manager/${record.id}/detail`,state:{typeId:record.orgType}}}>{text}</Link>
// 页面接收参数
let orgType = this.props.location.state.typeId;
使用TS时编译器报警告: 并非所有路径都有返回值
比如说: 你可以看一下你是不是写了分支语句, 是不是每一个结果都有`return`
使用antd的表单校验不能绑定value
render方法代码
<Form.Item label="企业名称">
{getFieldDecorator('bussinessName', {
rules: [{ required: true, message: '请输入企业名称!' }],
})(
<Input
placeholder="请输入企业名称"
onChange={(e) => this.inputOnChange('bussinessName', e.target.value)}
/>,
)}
</Form.Item>
inputOnChange方法代码(在这里改变state)
inputOnChange = (type: string, value: any) => {
this.setState({
[type]: value
})
}
表单校验封装好的方法,能用来初始化input中的值
this.props.form.setFieldsValue({
bussinessName: bussinessInfo.bussinessName, // 企业名称
})
路由守卫的使用
- 路由守卫组件的路径相对于项目根目录,且后缀名不能省略;
- 在项目根目录下创建routes目录,用于存放路由守卫组件;
/routes/PriviteRoute.js
中编写如下代码
import Redirect from 'umi/redirect'
export default function(props) {
if(Math.random()>0.5) {
return <Redirect to="/login" /> //没有登录时,重定向到登录页
}
//登录成功时,显示子路由的页面组件
return <div>{props.children}</div>
}
- 创建登录页
umi g page login
- 在
config/config.js
中配置/login,并守卫/about
注意: 有可能你的路由配置不是在这里,看你自己在哪里了
routes: [
{ path: "/login", component: "./login" },
{
path: "/about",
component: "./about",
Routes: ["./routes/PriviteRoute.js"] //路由守卫
},
......
]
- 这样的话就会在访问
/about
之前先去路由守卫的文件中寻找去哪一个路由了