前面的課程都是使用的約定路由,就是自動生成的,可是咱們作項目大部分都是涉及權限控制的,這時就仍是得用控制路由,僅今天就來改進一下
.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
屬性配置。html
components\Authorized
import 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));
裏面的判斷能夠根具你本身的業務來寫,我這邊是跳轉到登錄頁面。react
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 就會重定向到登錄頁面:git
這樣簡單的umi使用就結束了,在我看來重點就這麼多,大部分仍是dva的使用,參考我以前的dva系列學一下就行了。這些框架其實都是比較好上手,關鍵仍是React的基礎要掌握好,還有es6的語法。若是你想要直接進入開發,建議不要本身再花時間搭建框架。即便你使用了umi本身按我所寫的搭建出來,也沒有直接用現成的快。
並且重複造輪子,並無什麼意義。建議直接使用ant-design-pro
https://github.com/ant-design...,該有的都已經幫你搭好了,若是你也想開發後臺管理的系統。es6
別忘了關注我 mike啥都想搞
github
還有其餘後端技術分享在個人公衆號。後端