react后台管理--路由demo

react后台管理系统

代码演示效果

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;