如何为AntD水平菜单添加React路由功能？

核心修改步骤 #

1. 导入React Router工具：选择useNavigate或Link实现路由跳转
2. 更新导航菜单数据：为每个菜单项添加对应路由路径
3. 绑定菜单点击事件：通过回调触发路由跳转，或直接用Link包裹菜单项
4. 配置嵌套路由：让主布局作为父路由，嵌套所有子页面路由

修改后的完整代码 #

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

// 更新导航数组，添加对应路由路径
const navigation = [
  { label: "Home", key: "1", path: "/" },
  { label: "Holiday Calendar", key: "2", path: "/holiday-calendar" },
  { label: "Event", key: "3", path: "/event" },
];

const MainLayout = () => {
  const [open, setOpen] = useState(false);
  const navigate = useNavigate(); // 获取路由导航方法

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

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

  const handleLogOut = () => {
    localStorage.removeItem("access-token");
    // 登出后可跳转至登录页
    navigate("/login");
  };

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

  // 菜单点击跳转逻辑
  const handleMenuClick = ({ key }) => {
    const targetItem = navigation.find(item => item.key === key);
    if (targetItem?.path) {
      navigate(targetItem.path);
    }
  };

  return (
    <Layout style={{ backgroundColor: "white" }}>      
      <Row style={{ backgroundColor: "#404140" }}>
        <Col
          style={{ padding: 5, margin: 0, height: 48 }}
          flex="300px"
        >
          {/* 将a标签替换为Link，避免页面刷新 */}
          <Link to="/holiday-calendar">
            <img src="/logo.png" alt="logo" style={{ height: 38 }} />
          </Link>
        </Col>
        <Col>
          <Menu              
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={["2"]}
            items={navigation}
            onClick={handleMenuClick} // 绑定点击跳转事件
          />
        </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;

路由配置示例 #

在根路由文件（如App.js）中配置嵌套路由，让主布局包裹所有子页面：

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import MainLayout from "./MainLayout";
import Home from "./pages/Home";
import HolidayCalendar from "./pages/HolidayCalendar";
import Event from "./pages/Event";
import Login from "./pages/Login"; // 可选：登录页

function App() {
  return (
    <Router>
      <Routes>
        {/* 非嵌套路由示例：登录页 */}
        <Route path="/login" element={<Login />} />
        
        {/* 主布局作为父路由，嵌套子页面 */}
        <Route path="/" element={<MainLayout />}>
          <Route index element={<Home />} /> {/* 默认首页 */}
          <Route path="holiday-calendar" element={<HolidayCalendar />} />
          <Route path="event" element={<Event />} />
        </Route>
      </Routes>
    </Router>
  );
}

export default App;

额外说明 #

• 若偏好简洁写法，可直接在navigation数组的label中使用Link组件，无需绑定onClick事件：

  const navigation = [
    { label: <Link to="/">Home</Link>, key: "1" },
    { label: <Link to="/holiday-calendar">Holiday Calendar</Link>, key: "2" },
    { label: <Link to="/event">Event</Link>, key: "3" },
  ];
  

• 确保子页面组件（Home、HolidayCalendar、Event）已正确创建并导出。

内容的提问来源于stack exchange，提问作者Dmap