react项目实战（权限模块开发一） 配置路由

第一步：采用dva创建项目，然后通过webstore打开项目（忽略）

项目解构如下：container是我新增加的文件夹用来存放相应的界面。



第二步 分析需求，

打算用react做个权限管理模块，首先是登陆界面，登陆完成后进入到首页框架界面，对权限信息进行维护，维护信息主要是：

用户信息User

角色信息Role

机构信息Org

资源信息Resource

资源权限信息ResourceACL

第三步写路由信息：

/src/router.js的内容：

import React from 'react';
import { Router, Route } from 'dva/router';
import { App, Login, User, Role, Org,Resource,ResourceAcl} from './containers'

function RouterConfig({ history }) {
return (
<Router history={history}>
<Route path="/" component={App}>
<Route path="/User" component={User}/>
<Route path="/Role" component={Role}/>
<Route path="/Org" component={Org}/>
<Route path="/Resource" component={Resource}/>
<Route path="/ResourceAcl" component={ResourceAcl}/>
</Route>
<Route path="/Login" component={Login}/>
</Router>
);
}
export default RouterConfig;

第四步：为了测试路由是否配置正确，先写个几个简单的界面来进行测试，目录解构如下：



src/containers/index.js的内容如下：

export App from './App'
export Login from './login/Login'
export User from './user/User'
export Role from './role/Role'
export Org from './org/Org'
export ResourceAcl from './resourceAcl/ResourceAcl'
export Resource from './resource/Resource'

针对每个菜单界面进行开发一个简单界面：

src/containers/App.js的内容如下：

import React, { Component } from 'react' // 引入React
import { Link } from 'react-router' // 引入Link处理导航跳转

import '../assets/css/bootstrap.min.css' // 引入样式文件

export default class App extends Component {
render() {
return(
<div>
<nav className="navbar navbar-default">
<div className="container-fluid">
<ul className="nav navbar-nav">
<li>
<Link to="/User" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>用户信息管理</Link>
</li>
<li>
<Link to="/Role" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>角色信息管理</Link>
</li>
<li>
<Link to="/Org" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>机构信息管理</Link>
</li>
<li>
<Link to="/Resource" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>资源管理</Link>
</li>
<li>
<Link to="/ResourceAcl" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>资源权限管理</Link>
</li>
<li>
<Link to="/Login" activeStyle={{color: '#555', backgroundColor: '#e7e7e7'}}>系统登陆</Link>
</li>
</ul>
</div>
</nav>
<div className="panel panel-default">
<div className="panel-body">
{ this.props.children }
</div>
</div>
</div>
)
}
}

注意 app.js引用了bootstrap的样式

import '../assets/css/bootstrap.min.css'

这个我是提前下载的，存放目录结果如下啊：



编写其他页面的内容，src/containers/user/User.js文件内容如下：

// 动态数据
import React, { Component } from 'react'
import { connect } from 'react-redux'

class User extends Component {
render() {
const { lists, fetchPostsIfNeeded, refreshData } = this.props
return (
<div>
<h1>用户管理</h1>
</div>
)
}
}
export default User;

其他界面的内容如User的一样，只是中文说明不一样而已。

第五步启动服务，测试下路由是否正确。



点击不同的菜单 显示不同的内容，则表示路由配置成功。