[JavaScript知识库]AntDsign菜单高亮

AntDsign 版本4.20.2
完整代码在文末

[antd: Menu] children will be removed in next major version. Please use items instead.

原因

<Menu
         mode="inline"
         theme="dark"
         selectedKeys={[selectedKey]}
         style={{ height: '100%', borderRight: 0 }}
          >
        <Menu.Item icon={<HomeOutlined />} key="/">
			    <Link to="/">数据概览</Link>
        </Menu.Item>
       <Menu.Item icon={<DiffOutlined />} key="/article">
             	 <Link to="/article">内容管理</Link>
      </Menu.Item>
        <Menu.Item icon={<EditOutlined />} key="/publish">
                <Link to="/publish">发布文章</Link>
       </Menu.Item>
    </Menu>

使用items替代 可以消除警报

<Menu
         mode="inline"
        theme="dark"
        defaultSelectedKeys={['1']}
       selectedKeys={test()}
       style={{ height: '100%', borderRight: 0 }}
        items={[
                            {
                                key: '1',
                                icon: <HomeOutlined />,
                                label: `数据概览`,
                                onClick: () => { navigate('/'); }
                            },
                            {
                                key: '2',
                                icon: <DiffOutlined />,
                                label: '内容管理',
                                onClick: () => { navigate('/article') }
                            },
                            {
                                key: '3',
                                icon: <EditOutlined />,
                                label: '发布文章',
                                // to: '/publish',
                                onClick: () => { navigate('/publish') }
                            },
                        ]}
                    />

完整代码，（需要自行配置路由）

import { Layout, Menu, Popconfirm } from 'antd'
import {
    HomeOutlined,
    DiffOutlined,
    EditOutlined,
    LogoutOutlined
} from '@ant-design/icons'
import './index.scss'
import { Outlet, useLocation, useNavigate, Link } from 'react-router-dom'

const { Header, Sider } = Layout

const GeekLayout = () => {

    let navigate = useNavigate();

    // // 这里是当前浏览器上的路径地址
    // const selectedKey = useLocation().pathname
    const selectedKey = window.location.pathname
    console.log(selectedKey);

    const highlight= () => {
        if (selectedKey === '/') {
            return ['1']
        } else if (selectedKey === '/article') {

            return ['2']
        } else if (selectedKey === '/publish') {
            return ['3']
        }
    }

    return (
        <Layout>
            <Header className="header">
                <div className="logo" />
                <div className="user-info">
                    <span className="user-name">user.name</span>
                    <span className="user-logout">
                        <Popconfirm title="是否确认退出？" okText="退出" cancelText="取消">
                            <LogoutOutlined /> 退出
                        </Popconfirm>
                    </span>
                </div>
            </Header>
            <Layout>
                <Sider width={200} className="site-layout-background">
                    <Menu
                        mode="inline"
                        theme="dark"
                        defaultSelectedKeys={['1']}
                        // 高亮显示
                        selectedKeys={highlight()}

                        style={{ height: '100%', borderRight: 0 }}
                        items={[
                            {
                                key: '1',
                                icon: <HomeOutlined />,
                                label: `数据概览`,
                                //当点击该标签， 跳转到Home
                                // to: '/',
                                onClick: () => { navigate('/'); }

                            },
                            {
                                key: '2',
                                icon: <DiffOutlined />,
                                label: '内容管理',
                                // to: '/article',
                                onClick: () => { navigate('/article') }
                            },
                            {
                                key: '3',
                                icon: <EditOutlined />,
                                label: '发布文章',
                                // to: '/publish',
                                onClick: () => { navigate('/publish') }

                            },
                        ]}
                    />
                  


                </Sider>
                <Layout className="layout-content" style={{ padding: 20 }}>

                    {/* 二级路由默认页面 */}
                    <Outlet />
                </Layout>
            </Layout>
        </Layout>
    )
}

export default GeekLayout

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖