react后台管理配置路由及侧边栏：_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} />
                            {/* 权限管理-权限列表,角色列表 */}
                                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"）用于做编程试导航和菜单高亮
                        <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))
				使用 react-sidebar 创建响应式侧边栏导航
 react-sidebarA sidebar component for React项目地址:https://gitcode.com/gh_mirrors/re/react-sidebar 1. 项目介绍
react-sidebar 是一个高度可定制的 React 侧边栏组件库，适用于构建网站或应用中的导航菜单。它提供了丰富的样式和交互功能...
				    最近做了一个后台管理系统主体框架是基于React进行开发的，因此系统的路由管理，选用了react-router（4.3.1）插件进行路由页面的管理配置。
实现原理剖析
1、hash的方式
    以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示
function Router() {
    this.routes = {};
    this.curren
import Router from './Router'
ReactDOM.render(<Router></Router>, document.getElementById('root'))
index.css
body{
    padding: 0px;
　　学习总结使用，博客如中有错误的地方，请指正。改系列文章主要记录了搭建一个管后台的步骤，主要实现的功能有：使用路由模拟登录、退出、以及切换不同的页面；使用redux实现面包屑；引入使用其他常用的组件，比如highchart、富文本等，后续会继续完善。
　　github地址：https://github.com/huangtao5921/react-antDesgin-admi...
优化路由拦截函数的使用，避免循环引用的隐患。
2022-01-13 更新：
重构路由配置列表的配置方式，配置更加简便，且便于后台管理系统的项目根据路由配置自动生成导航菜单。
实现的功能：
全局路由统一管理，支持便捷配置路由重定向、路由懒加载、自定义meta字段等。
全局路由拦截，支持读取路由meta配置，支持拦截跳转其他路由等。
同时也支持嵌套路由、动态路由参数等.
 npm install react-sidemenu --save
在您的React.js应用程序中导入组件：
 import SideMenu from 'react-sidemenu';
如果要访问Flow类型的组件，请在通过npm安装时从dist文件夹中包含SideMenu.js 。
造型！！！
 要使用默认样式，请在项目中包含side-menu.css 。 通过npm安装时，可以在dist文件夹中找到它。 有关如何自定义样式的想法，请参见 。
演示与范例
展示了功能和代码示例。 在示例中，
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 "../pa...
				效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。 
代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
				上一节介绍了创建项目，并简单使用antd5，这一章节主要介绍必不可少的路由以及状态管理器，如有不正确地方，欢迎大佬指正！！！！
路由我采用React Router 6版本，个人喜欢使用新版本的东西，跟随时代脚步嘛。
状态管理器还是采用最基本的redux,这个教程网上也是很多，遇到问题方便查阅嘛。
				1、动态路由数据源
import { UserOutlined, VideoCameraOutlined, AppstoreOutlined } from "@ant-design/icons";
const menuList = [{
    key: 'sub1',
    title: '首页',
    icon: <UserOutlined />,
    path: '/homePage',
    sourcePath: 'views/homePage',
    childre.
react后台管理系统路由配置：

大概需求：

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

2、配置完成后就直接在App.js中引入，让他加载这个路由页面就可以了

3、 dashboard文件用于配置整个页面结构及路由：（ 斜杠 / 页面 ）

渲染路由的第二种情况：（后端返回的数据直接渲染）

二、侧边栏配置:（路由跳转）

3、 dashboard文件用于配置整个页面结构及路由：（斜杠 / 页面）
