一、抛出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页面中的一些组件,比如头部组件,尾部组件 路由组件