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' // 引入Reactimport { 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的一样，只是中文说明不一样而已。

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

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