如何在 Material-ui 中使用 href

Question

我之前问过这段代码，但措辞不佳。 我正在尝试让我的 menuItem 与 href 一起使用，到目前为止，我的“主页”按钮可以与 href 一起使用，但我无法让“会话主页”、“预订会话”或“[S] 主持会话”起作用。

任何帮助表示赞赏：D

PS：“Sessions home”中的 onClick: () => {Console.log()} 有效，但就我所知。

头文件.js

import React from "react";
import MenuButton from "./MenuButton.js";

const Header = () => {
    const menu = [
        {
            name: "Home",
            href: "/",
        },
        {
            name: "Sessions",
            menuItems: [
                {
                    name: "Sessions Home",
                    href: "/sessions",
                    key: "Sessions",
                    onClick: () => {Console.log("This button click works!")}
                },
                {
                    name: "Book a Session",
                    href: "/sessions/book",
                    key: "Book"
                },
                {
                    name: "[S] Host a session",
                    href: "/sessions/host",
                    key: "Host"
                }
            ]
        }
    ];
    return menu.map((item, index) => <MenuButton key={index} menu={item} />);
};
export default Header;

菜单按钮.js

import React from "react";
import { Button, Menu, MenuItem } from "@material-ui/core";

const MenuButton = ({ menu }) => {
    const [anchorEl, setAnchorEl] = React.useState(null);

    const handleClick = (event) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };

    if(menu.menuItems == null){
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    href={menu.href}
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
            </>
        );
    } else {
        return (
            <>
                <Button
                    aria-controls={`${menu.name}-menu`}
                    aria-haspopup="true"
                    onClick={handleClick}
                >
                    {menu.name}
                </Button>
                <Menu
                    id={`${menu.name}-menu`}
                    anchorEl={anchorEl}
                    getContentAnchorEl={null}
                    keepMounted
                    open={Boolean(anchorEl)}
                    onClose={handleClose}
                >
                    {menu.menuItems.map((item) => (
                        <MenuItem href={item.href} key={item.href} onClick={item.onClick}>
                            {item.name}
                        </MenuItem>
                    ))}
                </Menu>
            </>
        );
    }
};

export default MenuButton;

Answer 1

你可以做这样的事情

 <MenuItem
  component={Link}
  // the 'to' prop (and any other props not recognized by MenuItem itself)
  // will be passed down to the Link component
  to="/profile">
  Profile
</MenuItem>

Github 问题参考解决方案。 https://github.com/mui-org/material-ui/issues/204#issuecomment-167754150