一个完整的react管理后台路由与项目配置

一：基本项目目录结构如下：

二： 路由配置如下

import {HashRouter as Router,Switch,Route,Redirect} from "react-router-dom"
import Login  from "../pages/Login"
import Layout  from "../pages/Layout"
import HouseStyle  from "../pages/HouseStyle"
import Permission  from "../pages/Permission"
import NotMatch  from "../pages/NotMatch"
import Register  from "../pages/Register"
function MainRoutes(){
    return(
        <Router>
            <Switch>
                <Route path="/login" component={Login} ></Route>    
                <Route path="/register" component={Register} />
                <Route path="/"  render={
                        ()=>{
                            return(
                                <Layout>
                                    <Switch>
                                        <Route path="/" exact component={HouseStyle}></Route>
                                        <Route path="/permission" exact component={Permission}></Route>
                                        <Route path="/houseStyle" exact component={HouseStyle}></Route>
                                        <Route component={NotMatch}></Route>
                                    </Switch>
                                </Layout>  
                            )                                  
                        }
                }>
                </Route>
            </Switch>              
        </Router>        
    )
}
export default MainRoutes

（3）最关键的就是根目录对应的Layout组件。它承载了后台的主题结构。左侧是导航栏，右侧是路由切换时加载的页面。我们通过props.children来生成

import React from "react"
import style from "./index.module.less"
import {Link}from "react-router-dom"
function MainLayout(props){
    return(
        <div className={style['main-layout-page']}>
            <section className={style['main-header']}></section>
            <section className={style['main-container']}>
                <div className={style['side-nav']}>                    
                    <p><Link to="/houseStyle">户型库</Link></p>
                    <p><Link to="/permission">权限控制</Link></p>
                </div>
                <div className={style['content']}>
                    {props.children}
                </div>
            </section>            
        </div>
    )
}
export default MainLayout