react后台管理--路由demo

比眉伴天荒 2022-08-30 01:51 168阅读 0赞

# react后台管理系统 #

代码演示效果  
![在这里插入图片描述][20210718131225378.gif_pic_center]

## 1. 入口文件 index ##

### index.js ###

import React from 'react'
    import ReactDOM from 'react-dom'
    
    import Router from './Router'
    
    ReactDOM.render(<Router></Router>, document.getElementById('root'))

### index.css ###

body{ 
        padding: 0px;
        margin: 0px;
    }
    
    .mainDiv{ 
        display: flex;
        width: 100%;
    }
    .leftNav{ 
        width: 16%;
        background-color: #c0c0c0;
        color:#333;
        font-size:24px;
        height: 1000px;
        padding: 20px;
    }
    .rightNav{ 
        width: 84%;
        height:1000px;
        background-color: #fff;
        font-size:20px;
    
    }
    
    .topNav{ 
        height:50px ;
        background-color: #cfdefd;
    }
    .topNav ul{ 
       display: flex; 
       margin: 0px;
       padding: 0px;
    }
    .topNav li{ 
       padding: 10px;
       text-align: center;
       list-style: none;
     }
     .videoContent{ 
         padding:20px;
     }

## 2. 路由文件 Router.js ##

import React from 'react';
    import {  BrowserRouter as Router, Route, Link } from 'react-router-dom'
    
    import Index from './components/Index'
    import Videos from './components/Videos'
    import Workplace from './components/Workplace'
    
    import './index.css'
    
    function Routers() { 
    
        let routerConfig = [
            {  path: '/', title: '博客首页', exact: true, component: Index },
            {  path: '/video', title: '视频教程', exact: false, component: Videos },
            {  path: '/workplace', title: '职场技能', exact: false, component: Workplace }
        ]
    
        return (
            <Router>
                <div className="mainDiv">
                    <div className="leftNav">
                        <h3>一级导航</h3>
                        <ul>
                            { 
                                routerConfig.map((item, index) => { 
                                    return (
                                        <li key={ index + item}><Link to={ item.path}>{ item.title}</Link></li>
                                    )
                                })
                            }
                        </ul>
                    </div>
                    <div className="rightNav">
                        { 
                            routerConfig.map((item, index) => { 
                                return (
                                    <Route key={ index + item} path={ item.path} component={ item.component} exact={ item.exact}></Route>
                                )
                            })
                        }
                    </div>
                </div>
            </Router>
    
        )
    }
    
    export default Routers;

## 3. 组件 component ##

### 3.0 video ###

#### Flutter.js ####

import React, {  Component } from 'react';
    
    class Flutter extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是首页Flutter</h2>
             );
        }
    }
     
    export default Flutter;

#### ReactPage.js ####

import React, {  Component } from 'react';
    
    class ReactPage extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是首页ReactPage</h2>
             );
        }
    }
     
    export default ReactPage;

#### Vue.js ####

import React, {  Component } from 'react';
    
    class Vue extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是首页Vue</h2>
             );
        }
    }
     
    export default Vue;

### 3.0 workplace ###

#### GetUp.js ####

import React, {  Component } from 'react';
    
    class GetUp extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是GetUp</h2>
             );
        }
    }
     
    export default GetUp;

#### Money.js ####

import React, {  Component } from 'react';
    
    class Money extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是Money</h2>
             );
        }
    }
     
    export default Money;

### 3.1 首页 Index.js ###

import React, {  Component } from 'react';
    
    class Index extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
                <h2>我是首页</h2>
             );
        }
    }
     
    export default Index;

### 3.2 Videos.js ###

import React, {  Component } from 'react';
    import { Link, Route} from 'react-router-dom'
    
    import ReactPage from './video/ReactPage'
    import Flutter from './video/Flutter'
    import Vue from './video/Vue'
    
    class Videos extends Component { 
        constructor(props) { 
            super(props);
            this.state = {   }
        }
        render() {  
            return ( 
               <div>
                   <div className="topNav">
                       <ul>
                           <li><Link to="/video/reactpage/">React教程</Link></li>
                           <li><Link to="/video/flutter/">flutter教程</Link></li>
                           <li><Link to="/video/vue/">vue教程</Link></li>
                       </ul>
                   </div>
                   <div className="videoContent">
                       <div><h3>视频教程</h3></div>
                       <Route path="/video/reactpage/" component={ ReactPage}></Route>
                       <Route path="/video/flutter/" component={ Flutter}></Route>
                       <Route path="/video/vue/" component={ Vue}></Route>
                   </div>
               </div>
             );
        }
    }
     
    export default Videos;

### 3.3 Workplace.js ###

import React, {  Component } from 'react';
    import {  Link, Route } from 'react-router-dom'
    
    import GetUp from './workPlace/GetUp'
    import Money from './workPlace/Money'
    
    class Workplace extends Component { 
        constructor(props) { 
            super(props);
            this.state = { }
        }
        render() { 
            return (
                <div>
                    <div className="topNav">
                        <ul>
                            <li><Link to="/workplace/money">程序员加薪秘籍</Link></li>
                            <li><Link to="/workplace/getup">程序员早起攻略</Link></li>
                        </ul>
                    </div>
                    <div className="videoContent">
                        <div><h3>职场软技能</h3></div>
                        <Route path="/workplace/money" component={ Money}></Route>
                        <Route path="/workplace/getup" component={ GetUp}></Route>
                    </div>
                </div>
            );
        }
    }
    
    export default Workplace;

[20210718131225378.gif_pic_center]: /images/20220829/cd902de44c254f22a158dbbae59bc87e.png