编写后台管理系统(1)--＞目录结构搭建

一、抛出react的webpack设置

 https://blog.csdn.net/Ghost__H/article/details/114703700

这一篇文章中详细记载了方法。

 二、文章目录架构

在 本系统中，由于还有与admin路由同级的目录。故需要有一个外层组件包裹。

 

admin.js，这个模块是系统中的主模块，和他同级的只有详情页面。

import React, {Component} from 'react';
import {Row,Col} from "antd";
import NavLeft from './components/NavLeft';

export default class Admin extends Component{
    render() {

        return (
            <>
                <Row className="container">
                    <Col span="3" className="navLeft">
                        <NavLeft/>
                    </Col>
                    <Col span="21" className="main">

                    </Col>
                </Row>
            </>
        )
    }
}

 App.js 由于有和admin.js同级的页面。所以需要包裹一下，它的作用就是包裹子组件，所以它只需要加载子组件即可

 

import React, {Component} from 'react';

export default class App extends Component{

  render(){
    return (
        <div>
          {this.props.children}
        </div>
    )
  }
}

router.js 就是管理路由加载区域

import React, {Component} from 'react';
import   {HashRouter,Route,Switch} from 'react-router-dom';
import App from './App';
import Admin from "./admin";
import './style/common.less';
export default class Router extends Component{
    render(){
        return (
            <HashRouter>
                <App>
                    <Route path="/admin" render={()=>
                        <Admin>

                        </Admin>
                    }>

                    </Route>
                </App>
            </HashRouter>
        )
    }
}

 index.js 加载router.js

 

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

components文件夹  放着admin页面中的一些组件，比如头部组件，尾部组件 路由组件