raect后台管理台子搭建

一、创建单页、应用安装需要的依赖库

npx.... 、react-router-dom(版本5）、axios、antd组件库

二、创建目录结构

src下

page

components

utils

service

routes

三、基础页面

四、路由配置

外层路由、内层路由

1、路由表，routes文件夹中，根据外层路由内层路由分为：mainRoutes、admainRoutes

import Login from '../page/Login'

import List from '../page/List/index'

...

export const mainRoutes=[ {path:'/login',component:Login},{path:'register',componet:Register},{path:'/404',component:NotFindPage}]

export const admain = [{path:'/admain/list',component:List},{path:'/admain/editor',component:Editor},{path:'/404',component:NotFindPage}]

2、index.js中

外层路由：

import {HashRouter,Switch,Route,Redirect} from 'react-router-dom'

import App from './app.js'

import {mainRoutes} from ''../Routes/index

<Router>

        <Switch>

                <route to='/admian' component={App}/>

                {

                        mainRoutes.map(route=>{

                                return (<Route  to={route.path}  component={route.component}/>)

                        })

                }

                <Redirect  from ='/admian'  extact  to='/admian'/>

                <Redirect  to='/404'/>

        </Switch>

</Router>

3、内层路由

import {Switch,Route,Redirect} from 'react-router-dom'

     return    isLogin?(  <div className='app'>  //div标签替换成Frame组件

        <Switch>

                {

                        mainRoutes.map(route=>{

                                return (<Route  to={route.path}  component={route.component}/>)

                        })

                }

                <Redirect  from ='/admian'  extact  to='/admian'/>

                <Redirect  to='/404'/>

        </Switch>

</div>):(<Route to='/login'>)

五、封装axios

utils/request.js

import axios from 'axios'

import {getAuth} from './utils/auth.js'

const instance = axios.creat({

        BaseUrl:'',

        timeOut:

})

instence.interceptors.request.use(config=>{

        config.headers['authorization'] = 'Brear  '+getAuth()

})

instence.interceptors.response.use(response=>{

        ..................

})

export defalut instance

六、创建接口

import instance from './utils/request.js'

export const getList = (p)=>instance('/admin/list',p)

..........

七、layout布局

在component/Frame

import {} from 'antd'

.....{props.children}