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

叁歲伎倆 2022-06-12 06:51 186阅读 0赞

**第一步：**采用dva创建项目，然后通过webstore打开项目（忽略）  
项目解构如下：container是我新增加的文件夹用来存放相应的界面。  
![这里写图片描述][SouthEast]  
**第二步** 分析需求，  
打算用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;

**第四步**：为了测试路由是否配置正确，先写个几个简单的界面来进行测试，目录解构如下：  
![这里写图片描述][SouthEast 1]  
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'

这个我是提前下载的，存放目录结果如下啊：  
![这里写图片描述][SouthEast 2]

编写其他页面的内容，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的一样，只是中文说明不一样而已。

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

![这里写图片描述][SouthEast 3]  
点击不同的菜单 显示不同的内容，则表示路由配置成功。

[SouthEast]: /images/20220612/944d2399edf14b8ca4484976d1767355.png
[SouthEast 1]: /images/20220612/95052dcd4d324c30bc3dd6e6bd0e2c25.png
[SouthEast 2]: /images/20220612/35fec71408bc4177acab8ef80f1c6525.png
[SouthEast 3]: /images/20220612/d38706a6217b4b2ca514e197935c60e1.png