从零开始到完整的React后台管理项目开发路程(关于路由导航栏的渲染方式)

前言

React用的是jsx风格的代码语言，所以写的的时候可以直接生成带html标签的数组

因为侧边路由配置不止一个，所以最好的方法是配置路由地址文件，然后去遍历渲染

其实就是递归的思路去生成数组。

首先需要写入路由数组：

/ src / config /menuConfig.js

import { MailOutlined } from '@ant-design/icons';
import React from 'react'
const menuList = [
    {
        title: '首页',
        key: '/home',
        icon: <MailOutlined />,
        isPubulic:true // 公开
    }, 
    {
        title: '商品',
        key: '/pro',
        icon: <MailOutlined />,
        children: [
            {
                title: '品类管理',
                key: '/category',
                icon: <MailOutlined />,
            }, {
                title: '商品管理',
                key: '/product',
                icon: <MailOutlined />,
            }
        ]
    },
    {
        title: '用户管理',
        key: '/user',
        icon: <MailOutlined />
    },
    {
        title: '角色管理',
        key: '/role',
        icon: <MailOutlined />
    }, {
        title: '图形图表',
        key: '/charts',
        icon: <MailOutlined />,
        children: [
            {
                title: '柱状图',
                key: '/charts/bar',
                icon: <MailOutlined />,
            }, {
                title: '折线图',
                key: '/charts/line',
                icon: <MailOutlined />,
            }, {
                title: '饼状图',
                key: '/charts/pie',
                icon: <MailOutlined />,
            }
        ]
    },
]
export default menuList

/**
* @descript 第一种：根据路由数组生成对应的标签数组 map方法写
*/

    getMenuList_map = (menuList) => {
        return menuList.map(item => {
            // item可能有children属性
            if (!item.children) {
                return (
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key}>{item.title}</Link>
                    </Menu.Item>)
            } else {
                return (
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuList_map(item.children)}
                    </SubMenu>
                )
            }
        })
    };

/**
* @descript 第二种：根据路由数组生成对应的标签数组 reduce方法写
*/

	
	// meuuList就是上面的路由js披露的路由数组来遍历重组
	
    getMenuList = (menuList) => {
        const pathname = this.props.location.pathname // 当前路由名字
        return menuList.reduce((pre, item) => {
           if(this.hasAuth(item))  { // 有权限的话
            if (!item.children) { // 没有二级路由
                if(item.key === pathname || pathname.indexOf(item.key)!== -1) {
                    this.props.setHeadTitle(item.title) // 记录路由名字
                }
                pre.push(
                    <Menu.Item key={item.key} icon={item.icon}>
                        <Link to={item.key} onClick={() =>this.props.setHeadTitle(item.title)}>{item.title}</Link>
                    </Menu.Item>)
            } else {
                // 拿到有父级的子菜单的父级key
                let cur = item.children.find(items => pathname.indexOf(items.key) === 0) // 页面下的子路由也要默认打开
                if (cur) {
                    this.curpa = cur ? item.key : ''
                }
                pre.push(
                    <SubMenu key={item.key} icon={item.icon} title={item.title}>
                        {this.getMenuList(item.children)}
                    </SubMenu>)
            }
           }
            
            return pre
        }, []) // 初始值是空数组
    }

 /**
     * @description 在第一次render之前执行,且只执行一次
     * 为第一次render渲染做准备(同步的)
     */
    UNSAFE_componentWillMount() {
        this.menuLists = this.getMenuList(menuList)
        console.log(this.menuLists)
    }

打印遍历生成的路由数组：

render() {
        // 保证路由地址为空时默认选中首页
        this.current = this.props.location.pathname
        // 子路由也要选择
        if (this.current.indexOf('/product') === 0) {
            this.current = '/product'
        }
        return (
            <div className='main_bd'>
                <Link to='/' className="display_row all_center color">
                    <img src={head} alt="头像" className="head_src" />
                    <div className="h9">{this.props.user.username}</div>
                </Link>
                <Menu
                    theme='light'
                    onClick={this.handleClick}
                    defaultOpenKeys={[this.curpa]}
                    selectedKeys={[this.current]}
                    mode="inline"
                >
                    {
                        this.menuLists
                    }
                </Menu>
            </div>
        )
    }