How to use React + ANTD to implement secondary menus in background management system

First, effect introduction

Without further ado, let’s take a look at the effect first

Specific effect display

Second, preparation

1. Create a project

npx create-react-app my-react-admin
Copy the code

2. Dependencies required by installation

npm i antd -S
Copy the code

Create the basic structure of the project

My-react-admin public SRC API banner.js nav.js pro.js user.js components // Public component layout // main // main interface structure Breadcrumb.jsx index.jsx MainHeader. JSX SideMenu. JSX router // Route related menus. Js redirectrouterView.jsx routerView.jsx store // State manager actionCreators modules common.js actiontypes.js index.js utils // Tool Request.js views // page app.jsx // main screen Index.css // style index.js // entry file config-overrides. Js // Config-decorator syntax package.json // description fileCopy the code

4. Design the main interface

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Main from './layout/main/Index'
const App = () = > {
  return (
    <Router >
      <Switch>
        <Route path="/" component = { Main} / >
      </Switch>
    </Router>)}export default App
Copy the code

5. Design the main layout page

Combined with UI library Layout components Layout /main/ index.jsx

import React from 'react'
import { Layout } from 'antd';
import { connect } from 'react-redux'
import logo from '. /.. /.. /logo.svg'
import SideMenu from './SideMenu'
import RouterView from '. /.. /.. /router/RouterView'
import MainHeader from './MainHeader';
const { Sider, Content } = Layout;

@connect(state= > {
  return {
    collapsed: state.getIn(['common'.'collapsed'])}})class Index extends React.Component {
  
  render() {
    const { collapsed } = this.props
    console.log('11', collapsed)
    return (
      <Layout>
        <Sider trigger={null} collapsible collapsed={collapsed}>
          <div className="logo">
            <img src={ logo } style={{width: '32px', height: '32px', margin: '0 10px 0 0'}} alt=""/>
            { collapsed ? null : <span>JD_ADMIN_PRO</span>  }
          </div>
          <SideMenu/>
        </Sider>
        <Layout className="site-layout">{/ *<Header className="site-layout-background" style={{ padding: 0}} >
            {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
              className: 'trigger',
              onClick: this.toggle,
            })}
          </Header>* /}<MainHeader />
          <Content
            className="site-layout-background"
            style={{
              margin: '24px 16px',
              padding: 24.minHeight: 280.position: 'relative'}} >
            <RouterView />
          </Content>
        </Layout>
      </Layout>); }}export default Index
Copy the code

6. Design routes

router/menus.js

import React, { lazy } from 'react'
import {
  HomeOutlined,
  PictureOutlined,
  MenuOutlined,
  PicLeftOutlined,
  SwapLeftOutlined,
  BorderTopOutlined,
  ClockCircleOutlined,
  UserOutlined,
  AppstoreOutlined
} from '@ant-design/icons'
const menus = [
  { 
    path: '/'.redirect: '/home'.meta: { // The route does not appear in the left menu bar
      hidden: true}}, {path: '/home'.title: 'System Home page'.icon: <HomeOutlined />,
    component: lazy(() = > import('. /.. /views/home/Index'))}, {path: '/bannermanager'.title: 'Multicast Chart Management'.icon: <PictureOutlined />,
    redirect: '/bannermanager/list'.children: [{path: '/bannermanager/list'.title: 'Multicast chart list'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/banner/Index'))}, {path: '/bannermanager/add'.title: 'Add caroute chart'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/banner/Add')),
        meta: {
          hidden: true}}]}, {path: '/navigatormanager'.title: 'Quick Navigation Management'.icon: <PicLeftOutlined />,
    redirect: '/navigatormanager/list'.children: [{path: '/navigatormanager/list'.title: 'Navigation list'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/navigator/List'))}, {path: '/navigatormanager/category'.title: 'Navigation classification'.icon: <SwapLeftOutlined />,
        component: lazy(() = > import('. /.. /views/navigator/Category'))}, {path: '/navigatormanager/hlist'.title: 'Home Navigation'.icon: <BorderTopOutlined />,
        component: lazy(() = > import('. /.. /views/navigator/HomeList')}]}, {path: '/hmanager'.title: 'Home Page Data Management'.icon: <ClockCircleOutlined />,
    redirect: '/hmanager/seckilllist'.children: [{path: '/hmanager/seckilllist'.title: 'Home Page Kill List'.icon: <MenuOutlined />,
        component: lazy(() = > import('.. /views/homedata/SeckillList'))}, {path: '/hmanager/recommentlist'.title: 'Home Recommended List'.icon: <MenuOutlined />,
        component: lazy(() = > import('.. /views/homedata/RecommentList')}]}, {path: '/usermanager'.title: 'User Management'.icon: <UserOutlined />,
    redirect: '/usermanager/list'.children: [{path: '/usermanager/list'.title: 'User List'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/user/List'))}, {path: '/usermanager/register'.title: 'Registered User'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/user/RegisterUser')},]}, {path: '/productmanager'.title: 'Merchandise Management'.icon: <AppstoreOutlined />,
    redirect: '/productmanager/list'.children: [{path: '/productmanager/list'.title: 'List of Goods'.icon: <MenuOutlined />,
        component: lazy(() = > import('. /.. /views/product/List'))}, {path: '/productmanager/sortlist'.title: 'Screen goods'.icon: <MenuOutlined />,
        component: lazy(() = > import('.. /views/product/SortList')},]}, {path: '/setting'.title: 'set'.icon: <MenuOutlined />,
    component: lazy(() = > import('.. /views/setting/Index')),
    meta: { // The route does not appear in the left menu bar
      hidden: true}}]export default  menus
Copy the code

7. Design routing rendering components

router/RouterView.jsx

import React, { Suspense } from 'react'
import { Spin } from 'antd'
import { Switch, Route } from 'react-router-dom'
import RedirectRouterView from './RedirectRouterView'
import menus from './menus'
function RouterView() {
  const renderRoute = (menus) = > {
    return menus.map(item= > {
      if (item.children) {
        return renderRoute(item.children)
      } else {
        return item.path === '/' ? null : <Route
          path={ item.path }
          key={item.path}
          exact
          component = { item.component} / >}})}return (
    <Suspense fallback={<div className="loading"><Spin size="large" /></div>} >
      <Switch>{/ *<Redirect path="/" exact to="/home" /> */}
        {
          renderRoute(menus)
        }
        {/* <Route path="/" exact component = { lazy(() = >import('.. /.. /views/home/Index'))} /> */}<RedirectRouterView />{/ *<Redirect path="/bannermanager" to="/bannermanager/list" />
        <Redirect path="/navigatormanager" to="/navigatormanager/list" />
        <Redirect path="/seckillmanager" to="/seckillmanager/list" />
        <Redirect path="/usermanager" to="/usermanager/list" />* /}</Switch>
    </Suspense>)}export default RouterView
Copy the code

8. Design the left menu rendering component

Layout/main/SideMenu.jsx

import React, { useState, useEffect } from 'react'
import { Menu } from 'antd';
import { withRouter, useHistory, useLocation } from 'react-router-dom'
import menus from '. /.. /.. /router/menus'
const { SubMenu } = Menu
const rootSubmenuKeys = []
menus.forEach(item= > {
  item.children && rootSubmenuKeys.push(item.path)
})
const SideMenu = withRouter((props) = > {
  const [openKeys, setOpenKeys ] = useState([])
  const [selectedKeys, setSelectedKeys ] = useState([])
  const history = useHistory()
  const renderMenu = (menus) = > {
    return (
      <>{menus.map(item => {if (item.children) {// Menus.map (item => {if (item.children) {<SubMenu key={item.path} icon={item.icon} title={item.title}>
                  {
                    renderMenu(item.children)
                  }
                </SubMenu>Return item.meta && item.meta. Hidden? Return item.meta. Hidden? null :<Menu.Item key={item.path} icon={ item.icon} >
              { item.title }
            </Menu.Item>}})}</>)}const goPage = ({ key }) = > {
    history.push(key)
  }

  const onOpenChange = keys= > { // keys [], containing the previous one and the one after the click
    console.log(keys) // ["/bannermanager", "/navigatormanager"]
    const latestOpenKey = keys.find(key= > openKeys.indexOf(key) === -1);
    console.log(latestOpenKey) // The current one/NavigatorManager
    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else{ setOpenKeys(latestOpenKey ? [latestOpenKey] : []); }}// To display the status of the current left menu selection ---- string[key] Key is path
  // defaultSelectedKeys
  // defaultOpenKeys
  const { pathname } = useLocation() // '/usermanager/list'
  const type = '/' + pathname.split('/') [1]

  useEffect(() = > {
    setOpenKeys([type])
    setSelectedKeys([pathname])
  }, [pathname])
  return (
    <Menu 
      theme="dark"
      mode="inline"
      defaultSelectedKeys={[pathname]}/ / {[' /usermanager/list']} arraydefaultOpenKeys={[type]}/ / {[' /usermanager']} arrayopenKeys = { openKeys }
      selectedKeys = { selectedKeys }
      onClick={ goPage } 
      onOpenChange = { onOpenChange }
    >{// Convenient to do multi-level menus - recursive design idea renderMenu(menus)}</Menu>)})export default SideMenu
Copy the code

9. Create corresponding pages

views/home/Index.jsx views/banner/Index.jsx views/banner/Add.jsx views/homedata/SeckillList.jsx views/homedata/RecommendList.jsx views/navigator/Category.jsx views/navigator/HomeList.jsx views/navigator/List.jsx views/product/List.jsx views/product/SortList.jsx views/user/List.jsx views/user/RegisterUser.jsx views/setting/Index.jsx

Three end,

If you also want to view the subsequent code, you can refer to baidu web disk address:

Link: pan.baidu.com/s/1d0f3Z_y2… Password: 8 loq