react菜单栏多种处理方案

cnpm install react-router-dom --save
react-router-dom里包含了react-router的依赖，因此我们在安装的时候只需要安装后者即可。

原生标签路由渲染

<Router>
  <Switch>   {/*只匹配其中一个 */}
    {routes.map((item, index) => {
      return (<Route excat key={index} path={item.path}
        component={item.component}></Route>)
    })}
    <Route path="/login/:id" component={Login}></Route>
    <Route render={() => <h1>这是个404页面，找不到了</h1>}></Route>
    {/* <Redirect from="/" to='/index'></Redirect> */}
  </Switch>
</Router>

使用antd组件路由渲染

import React, { Component } from 'react'
import {
  // BrowserRouter as Router,
  // Route, //基本的路由块
  // Switch,  //监听空路由的
  Link, //这个是a标签,
  // Redirect,//重定向
  // Prompt  //防止转换
} from "react-router-dom";
import { Layout, Menu } from 'antd';
import {
  UserOutlined,
  SettingOutlined
} from '@ant-design/icons';
import './index.scss'
//导入一定要写在解构的前面
import { MenuData } from "../../utils/menu.js";

const { Sider } = Layout;
const { SubMenu } = Menu;
export default class SiderPage extends Component {
  render() {
    return (
      <div className="sider">
        <Sider
          width="250px"
          trigger={null} collapsible collapsed={this.props.collapsed}>
          <div className="logo" />
          <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            {
              MenuData.map(item => {
                if (item.children && item.children.length) {
                  return (
                    <SubMenu key={item.url} icon={< SettingOutlined />} title={item.name}>
                      {
                        item.children.map(sub => {
                          return (
                            <Menu.Item key={sub.url} icon={<UserOutlined />}>
                              <Link to={'/index/' + sub.url}>{sub.name}</Link>
                            </Menu.Item>
                          )
                        })
                      }
                    </SubMenu>
                  )
                }
                return (
                  <Menu.Item key={item.url} icon={<UserOutlined />}>
                    <Link to={'/index/' + item.url}>{item.name}</Link>
                  </Menu.Item>
                )
              })
            }
          </Menu>
        </Sider>
      </div>
    )
  }
}

antd组件加无限极循环递归

这种最好啦，极力推荐，应为复用性最好

import React, { Component } from 'react'
import {
  // BrowserRouter as Router,
  // Route, //基本的路由块
  // Switch,  //监听空路由的
  Link, //这个是a标签,
  // Redirect,//重定向
  // Prompt  //防止转换
} from "react-router-dom";
import { Layout, Menu } from 'antd';
import {
  SettingOutlined
} from '@ant-design/icons';
import './index.scss'
//导入一定要写在解构的前面
import { MenuData } from "../../utils/menu.js";

const { Sider } = Layout;
const { SubMenu } = Menu;
export default class SiderPage extends Component {
  constructor() {
    super();
    this.state({
      openKeys: '/index',
      selectedKeys: '/index/news'
    })
  }
  //生命周期，在这里多了一层接口请求，并且过滤路由
  //过滤当前登陆的用户所拥有的权限，才去渲染
  //渲染带子级的菜单
  renderSubMenu = ({ url, name, children }) => {
    return (<SubMenu key={url} icon={<SettingOutlined />}
      title={name}>
      {children && children.map(sub => {
        return sub.children && sub.children.length > 0 ?
          this.renderSubMenu(sub) : this.renderMenu(sub);
      })}
    </SubMenu>)
  }
  //渲染不带子级的菜单
  renderMenu = ({ url, name }) => {
    return <Menu.Item key={url}>
      <Link to={'/index/' + url}>{name}</Link>
    </Menu.Item>
  }
  render() {
    return (
      <div className="sider">
        <Sider
          width="250px"
          trigger={null} collapsible collapsed={this.props.collapsed}>
          <div className="logo" />
          <Menu theme="dark"
            // 打开的 参数是匹配路径
            OpenKeys={['/index']}
            // 选中的 参数是匹配路径
            SelectedKeys={['/index/news']}
            mode="inline">
            {
              MenuData && MenuData.map(item => {
                return item.children && item.children.length > 0 ?
                  this.renderSubMenu(item) : this.renderMenu(item);
              })
            }
          </Menu>
        </Sider>
      </div>
    )
  }
}

递归+刷新默认打开和选中

import React, { Children, Component } from 'react'
import { Menu } from 'antd';
import { Link, withRouter } from 'react-router-dom';
import meunList from '../../config/menuConfig'
import {
  AppstoreOutlined,
  PieChartOutlined,
} from '@ant-design/icons';

const { SubMenu } = Menu;

class subMenu extends React.Component {
  childrenMenu = subMenu => {
    return (
      < SubMenu key={subMenu.key} title={subMenu.title}
        icon={< AppstoreOutlined />}  >
        {
          subMenu.children.map(item => {
            return item.children && item.children.length > 0 ?
              this.childrenMenu(item) : this.menuItem(item)
          })
        }
      </SubMenu>)
  }
  menuItem = menuItem => {
    return (< Menu.Item key={menuItem.key} icon={< PieChartOutlined />}>
      <Link to={menuItem.key}>{menuItem.title}</Link>
    </Menu.Item >)
  }
  //或者可以在这2个函数里监听点击
  //打开的和选中的，存入localstorage种
  //默认从localstorage取出，没有从当前状态种取出
  selectData = ({ key }) => {
    console.log(key)
  }
  openData = key => {
    console.log(key)
  }
  render() {
    let key = this.props.location.pathname
    meunList.forEach(item => {
      let selectKey = item.children && item.children.find(item => {
        return item.key == key
      })
      if (selectKey) {
        this.selectKey = item.key
      }
    })
    console.log(this.selectKey)
    
    return (
      <Menu mode="inline"
        selectedKeys={[this.props.location.pathname]}
        theme="dark"
        defaultOpenKeys={[this.selectKey]}
        //打开的菜单选项
        onOpenChange={this.openData}
        //监听点击打开的菜单里面子选项的值
        // this.selectKey
        onClick={this.selectData}
      >
        {
          meunList && meunList.map(item => {
            return (
              item.children && item.children.length > 0 ?
                this.childrenMenu(item) : this.menuItem(item)
            )
          })
        }
      </Menu>
    );
  }
}
export default withRouter(subMenu)