前面的课程都是使用的约定路由，就是自动生成的，但是我们做项目大部分都是涉及权限控制的，这时就还是得用控制路由，仅今天就来改进一下1 修改配置.umirc.js// ref: https://umijs.org/config/export default { plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html [‘umi-plugin-react’, { antd: true, dva: true, dva: { immer: true }, dynamicImport: false, title: ‘umis’, dll: false, hardSource: false, routes: { exclude: [ /model.(j|t)sx?$/, /service.(j|t)sx?$/, /models//, /components//, /services//, ], }, }], ], routes: [ { path: ‘/’, component: ‘../layouts’, }, { path: ‘/users’, component: ‘../layouts’, Routes: [‘src/components/Authorized’], routes: [ { path: ‘/users’, component: ‘./users’ }, ], }, { path: ‘/login’, component: ‘../layouts’, routes: [ { path: ‘/login’, component: ‘./login’ }, ], }, { path: ‘/test’, component: ‘../layouts’, routes: [ { path: ‘/test’, component: ‘./test’ }, ], }, ]}一旦使用了配置路由，那么pages下的文件将不再生成路由。component的路径是相对于src\pages的。在需要权限控制的的路由下使用Routes属性配置。2 鉴权路由组件 components\Authorizedimport React, { Component } from ‘react’import { connect } from ‘dva’;import { Router, Route, Redirect, withRouter } from ‘dva/router’;import { message } from ‘antd’;class AuthRouter extends Component { render() { const { component: Component, …rest } = this.props const isLogged = false if (!isLogged) { message.warning(‘您需要先登陆’); } return ( <Route {…rest} render={props => { return isLogged ? <Component {…props} /> : <Redirect to="/login" /> }} /> ) }}function mapStateToProps(state) { return { state }}// export default ListData;export default connect(mapStateToProps)(withRouter(AuthRouter));里面的判断可以根具你自己的业务来写，我这边是跳转到登陆页面。3 登陆页面import { connect } from ‘dva’;function Login(){ return ( <div> <h1>this is login page</h1> </div> )}function mapStateToProps(state) { console.log(state.login); return { test:‘fhf’ };}export default connect(mapStateToProps)(Login);这样你访问/users 就会重定向到登陆页面：4 总结这样简单的umi使用就结束了，在我看来重点就这么多，大部分还是dva的使用，参考我之前的dva系列学一下就好了。这些框架其实都是比较好上手，关键还是React的基础要掌握好，还有es6的语法。如果你想要直接进入开发，建议不要自己再花时间搭建框架。即使你使用了umi自己按我所写的搭建出来，也没有直接用现成的快。而且重复造轮子，并没有什么意义。建议直接使用ant-design-prohttps://github.com/ant-design…，该有的都已经帮你搭好了，如果你也想开发后台管理的系统。别忘了关注我 mike啥都想搞还有其他后端技术分享在我的公众号。