react后台管理配置路由及侧边栏：

<>react后台管理系统路由配置：

<>大概需求：

假设：dashboard文件放的是整个页面，分为导航，和侧边栏，中间内容栏；导航和侧边每个路由都需要，将相关的路由页面都放到中间内容共栏就可以。

1、分为两部分大文件、login登入页面，/ 转到到dashboard，
这样分的好处是，不用跳转到一个页面就判断有没有登入。这里进行统一判断，如果没有登入 ，其他以/ 开头的页面都会跳转到login中。
一旦登入后就跳转到dashboard页面中，这个页面有导航栏，和侧边栏，这两个是公用内容，哪里都用的上。下面部分就是动态会变的。

<>一、文件：router.js路由配置

做判断，登入了就允许看所有页面，没有登入就打到登入页面
import React, { Component } from 'react' //引入核心 import { //引入路由相关配置 HashRouter,
// 构建 hash 路由, #/home #/login === ( Vue mode:hash ) // BrowserRouter,// 构建
history 路由 /home /login === ( Vue mode:history ) Redirect, //重定向 Route, //路由坑
Switch//模糊匹配，箱单与Switch判断语句 } from 'react-router-dom' //-------blog
自定义组件------------------------- import Login from '../views/login/Login'
//111、登入页面 import DashBoard from '../views/dashboard/DashBoard'//222、设置为/
的页面，整个页面结构都在这个文件，名字随便取 export default class Router extends Component { render()
{ return ( <HashRouter> //哈希路由 <Switch> //判断路由，先匹配登入页面，匹配上就brack出去 <Route path=
"/login" component={Login}/> 路由拦截--三目
————用render箭头函数形式，做判断，是否有token，有就说明登入，能进入到后台页面，没有就打回登入页面<Route path="/" render={
()=> localStorage.getItem("token")?<DashBoard/>:<Redirect to="/login"/> } /> </
Switch> </HashRouter> ) } }
<>2、配置完成后就直接在App.js中引入，让他加载这个路由页面就可以了

文件：App.js配置使用
import React from 'react'; //引入核心react import BlogRouter from './router'
//引入router路由配置文件 //根组件 class App extends React.Component{ render(){ return <
BlogRouter/> //直接return出去，变成jsx文件供页面使用 } } export default App;
<>3、 dashboard文件用于配置整个页面结构及路由：（ 斜杠 / 页面 ）

注：真实工作中权限这里不用自己做判断，我们只负责循环操作
//引入相关的路由及核心 import React, { Component } from 'react' import { Route, Redirect,
Switch} from 'react-router-dom' import Home from '../home/Home' import Users
from '../usermanage/Users' import SideMenu from './SideMenu' //组件的侧边栏，用antd-UI搭建
import TopHeader from './TopHeader' //组件的导航栏，用antd-UI搭建 import './index.css'
//antd组件库的配置 import { Layout } from 'antd'; import Create from
'../article-manage/Create' const { Content } = Layout; //解构 export default class
DashBoard extends Component { render() { let { roleType } = JSON.parse(
localStorage.getItem("token")) //将token结构出来 return ( <Layout> {/* 自定义的sidemenu
*/} <SideMenu></SideMenu> //侧边栏 <Layout className="site-layout"> <TopHeader></
TopHeader> //组件导航栏 <Content //以下全是组件内容区的配置， className="site-layout-background"
style={{ margin: '24px 16px', padding: 24, minHeight: 'auto', }} > <Switch>
//开始相关的路由配置 {/* home路由 */} <Route path="/home" component={Home} /> {/*
用户权限-用户列表 */}
//这个判断是根据token的内容，判断登入后用户的权限，如果登入用户权限大于3的话就渲染这个路由组件，如小于，就不渲染，这个用户就没有权限看着列表 {
roleType>= 3 ? <Route path="/user-manage/users" component={Users} /> : null } {
/* 权限管理-权限列表,角色列表 */} { roleType >= 3 ? <Route path="/right-manage" component={
Manage} /> : null } {/* 文章管理- 文章列表 文章分类 */} <Route path="/article-manage/list"
component={List} /> <Route path="/article-manage/preview/:myid" component={
Preview} exact /> //动态组件的详情页面 <Route path="/article-manage/create" component={
Create}/> <Redirect from="/" to="/home" exact /> //重定向到home页面 <Route path="*"
component={NotFound} /> //上面的都匹配不到，设置 “ * ”后随便在地址栏乱输都会匹配404组件 </Switch> </
Content> </Layout> </Layout> ) } }
<>渲染路由的第二种情况：（后端返回的数据直接渲染）
import React, { Component } from 'react' //引入核心 import {Route,Redirect,Switch}
from 'react-router-dom'//引入路由 import newList from '@/views/index' //引入后端数据
import { Layout } from 'antd' //antd const { Content } = Layout;//antd export
default class Contents extends Component { //组件 constructor(props) { super(props
) this.state = { } } forList = (newList) =>{ //定义函数，接收后端数据 //
console.log(newList) return newList.map((item) =>{ //循环 if(item.children) {
//判断是否有孩子，有就继续循环 return item.children.map((item) =>{ //循环孩子数据路由 return <Route
exact key={item.id} path={item.path} component={item.component}></Route> }) }
else{//如果没有孩子就直接循环 return <Route exact key={item.id} path={item.path} component=
{item.component}></Route> } }) } render () { return ( <Content className=
"site-layout-background" style={{ margin: '24px 16px', padding: 24, minHeight:
'100%', }} > <Switch>//保留模糊匹配 {this.forList(newList)}
//调用上面定义的函数，将后端数据传递过去用于渲染路由 <Redirect from="/*" to="/home"></Redirect> //路由重定向 <
/Switch> {/* Content */} </Content> ) } }
<>二、侧边栏配置:（路由跳转）

1、先配置假数据用于做侧边栏的循环：（工作中是后端返回）
list.js文件： const MyData = [ {//一级菜单需要的参数 title:"首页", icon:UserOutlined,
permission:1, //权限判断 path:'/home' //设置的好处：1、可以用来跳转页面，2、可以用来配置下拉菜单的默认下来项 }, {
title:"用户管理", icon:VideoCameraOutlined, permission:3, path:'/user-manage',
children:[ //二级菜单的配置 { title:"用户列表", icon:UserDeleteOutlined , permission:3,
path:"/user-manage/users" } ] }, ] export default MyData //抛出去
配置侧边栏：
用antd-UI框架布局侧边栏
defaultSelectedKeys：组件库提供设置菜单高亮的属性
defaultOpenKeys：组件库提供设置菜单默认展开效果，key需要和后端返回的数据路径一致
注：递归调用时经典
import React, { Component } from 'react' //引入react核心 import MenuArr from
'../../router/list.js'//引入上面定义的假数据 import { Layout, Menu } from 'antd'; import {
withRouter} from 'react-router'; //引入高阶组件 import {connect} from 'react-redux'
//引入react-redux const { Sider } = Layout; //解构 const { SubMenu } = Menu; class
SideMenu extends Component { //组件 state = { collapsed: false }
//1、自己封装渲染函数，遍历侧边栏 renderMenu = (menus)=>{ //BBB let {roleType} = JSON.parse(
localStorage.getItem("token")) //2、roleType
当前登录用户的roleType(就是用户权限,从token中拿出来做判断，权限越高看的越多 return menus.map(item=>{
//3、提示：判断当前登录的用户的角色值（roleType），跟当前要渲染的侧边栏项需要的角色值进行对比 if(item.children &&
roleType>= item.permission){
//4、判断是否有孩子参数，有就渲染二级标题，并且判断登入用户的权限是不是大于标题数据的权限，大于就渲染，小于就隐藏（就是数据中定义的permission）
return <SubMenu key={item.path} title={
//重：将每个渲染的标题都设置key（就是数据中定义的path="/home"）用于做编程试导航和菜单高亮 <span> <item.icon/> <span>
{item.title}</span> </span> }> { //递归用法 this.renderMenu(item.children)
//重：7、下面还有children在继续递归渲染，（就不需要每次都去做循环渲染） } </SubMenu> }else{ if( item.
permission> roleType){ //6、判断登入的权限是否大于当前标题数据的权限，大于就显示，小于就隐藏。 return null }
return ( //5、如果没有children孩子数据，就直接渲染一级标题，menu <Menu.Item key={item.path} icon={<
item.icon />}>重：将每个渲染的标题都设置key（就是数据中定义的path="/home"）用于做编程试导航和菜单高亮 {item.title} <
/Menu.Item> ) } }) } handleChangePage = (obj)=>{ //AAA // console.log(obj) //
高阶组件提供 this.props.history.push(obj.key)//key路由对应的路径,进行点击每一个标题的时候，条状到响应的路由去 }
render() { // console.log(this.props) //拿到此时路径 let selectedKey = this.props.
location.pathname //设置defaultSelectedKeys let openKey = "/"+this.props.location.
pathname.split("/")[1] //截取二级路由的一级路径，设置defaultOpenKeys return ( <Sider trigger={
null} collapsible collapsed={this.props.isCollapsed}> {/* <div className="logo"
/> */} { /* andt组件库提供：defaultSelectedKeys ：高亮显示谁？//从编程试导航中结构出来path来，给到这个属性
defaultOpenKeys：//初始展开的 SubMenu 菜单项 key 数组
（前提是渲染标题的时候，key要和解构出来的path相对应，不然初始化展开不起作用） */ } <Menu theme="dark" mode="inline"
defaultSelectedKeys={[selectedKey]} defaultOpenKeys={[openKey]} onClick ={this.
handleChangePage} //AAA //点击 MenuItem 调用此函数,会传递点击的是具体的哪一个值过去，就包含数据的path > {
//BBBB this.renderMenu(MenuArr) //调用上面抽离的函数，渲染侧边栏，传递的值就是引入的假数据 } </Menu> </Sider
> ) } } // connec拿到了store, store.getState() const mapStateToProps = state => {
// console.log(state) return { name:"kerwin", a:1, isCollapsed:state.isCollapsed
} //函数返回值 ，就是将来往sideMeun 组件传来的属性 }// 映射redux 状态==>当前组件属性 export default connect(
mapStateToProps)(withRouter(SideMenu))

• « 上一篇：中国人口到底有多少 第七次全国人口普查来了 ：腾讯提供技术支持
• » 下一篇：spring注解讲解（通俗易懂）