如何将 React 路由添加到 AntD 水平菜单？

Question

我有以下组件作为主要布局。当我单击菜单项时，我希望它们导航到主页、假日日历和活动页面。我可以用这个水平菜单做什么？下面的代码显示了围绕上述页面的主要布局。我正在使用 AntD 和反应路由器。这个主要布局围绕着所有其他路由器。

import { Layout, Menu, Button, Avatar, Row, Col, Space, Dropdown } from "antd";
import React, { useState } from "react";
import { Outlet } from "react-router-dom";

const navigation = [
  { label: "Home", key: 1 },
  { label: "Holiday Calendar", key: 2 },
  { label: "Event", key: 3 },
];

const MainLayout = () => {

  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
    window.dispatchEvent(new Event("loadHolidayCalander"));
  };

  const handleLogOut = () => {
    localStorage.removeItem("access-token");

  };
  const menu = (
    <Menu
      items={[
        {
          key: "1",
          label: <Button onClick={handleLogOut}>Log out</Button>,
        },
      ]}
    ></Menu>
  );

  return (
    <Layout style={{backgroundColor:"white"}}>      
        <Row style={{ backgroundColor:"#404140"}}>
          <Col
          style={{padding:5, margin:0, height:48}}
            flex="300px"
           >
            <a href="/holiday-calander">
              <img src="/logo.png" alt="logo" style={{ height: 38 }} />
            </a>
          </Col>
          <Col>
            <Menu              
              theme="dark"
              mode="horizontal"
              defaultSelectedKeys={["2"]}
              items={navigation}
            />
          </Col>
          <Col
            flex="auto"
            style={{

              padding:5

            }}
          >
            <div style={{ position: "absolute", right: "5px" }}>
              <Space size={20}>
                <Dropdown overlay={menu} placement="topRight" arrow>
                  <Avatar  style={{ width: 38, height:38 }} />
                </Dropdown>
              </Space>
            </div>
          </Col>

        </Row>
        
    
      <Layout
        style={{
          padding: 0,
          backgroundColor: "white",
          marginLeft:28,
          marginRight:28,
        }}
      >

        <Outlet />

      </Layout>
    </Layout>
  );
};

export default MainLayout;

Answer 1

onClick您可以向组件添加一个处理程序Menu，该处理程序将传递一个带有key属性的对象，您可以navigation在数组中搜索匹配元素。

将链接目标添加到navigation数组元素。

import { ..., useNavigate, ... } from 'react-router-dom';

...

const navigation = [
  { label: "Home", key: 1, target: "/" },
  { label: "Holiday Calendar", key: 2, "/holidaycalendar" },
  { label: "Event", key: 3, "/event" },
];

...

const navigate = useNavigate();

const handleMenuClick = ({ key }) => {
  const { target } = navigation.find(item => item.key === key) || {};
  if (target) {
    navigate(target);
  }
};

...

<Menu              
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["2"]}
  items={navigation}
  onClick={handleMenuClick}
/>

一项改进可能是将key属性设为链接目标。

import { ..., useNavigate, ... } from 'react-router-dom';

...

const navigation = [
  { label: "Home", key: "/" },
  { label: "Holiday Calendar", key: "/holidaycalendar" },
  { label: "Event", key: "/event" },
];

...

const navigate = useNavigate();

const handleMenuClick = ({ key }) => {
  if (key) {
    navigate(key);
  }
};

...

<Menu              
  theme="dark"
  mode="horizontal"
  defaultSelectedKeys={["/holidaycalendar"]}
  items={navigation}
  onClick={handleMenuClick}
/>