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的一样，只是中文说明不一样而已。

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

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