不能用 Link 包装 Menu.Item

Question

我目前正在为各个菜单项使用 Menu for my main header navigation, with Menu.Item 组件。

目前，代码如下所示：

<Menu>
    <Menu.Item>
        <span className="nav-text">
            <Link href="/login">
                <a>Login</a>
            </Link>
        </span>
    </Menu.Item>
    <Menu.Item>
        <span className="nav-text">
            <Link href="/register">
                <a>Register</a>
            </Link>
        </span>
    </Menu.Item>
</Menu>

这使得 Login 和 Register 跨度可点击，但不是菜单项本身。当试图向上移动 Link 和 a 标签以包含整个 Menu.Item -

<Menu>
    <Link href="/login">
        <a>
            <MenuItem>
                <span className="nav-text">
                    Login
                </span>
            </MenuItem>
        </a>
    </Link>
    <Link href="/register">
        <a>
            <MenuItem>
                <span className="nav-text">
                    Register
                </span>
            </MenuItem>
        </a>
    </Link>
</Menu>

整个菜单被隐藏并替换为 ···:

我不确定如何解决这个问题并使菜单正确呈现且菜单项可点击，因此我很乐意就此获得一些帮助。

Answer 1

您的 Link 组件语法无效。你应该这样使用： <Link to="/register">Register</Link>

将您的代码更改为：

import {Link} from "react-router-dom";
...
      <Menu mode="horizontal">
        <Menu.Item key="login">
          <Link to="/login">
            <span className="nav-text">Login</span>
          </Link>
        </Menu.Item>

        <Menu.Item key="register">
          <Link to="/register">
            <span className="nav-text">Register</span>
          </Link>
        </Menu.Item>
      </Menu>

Answer 2

这个问题似乎以某种方式自行解决了，之前我遇到了另一个我目前无法重现的问题。

Answer 3

您可以使用 'next/router' 中的挂钩“useRouter”来管理 Link 不够用的链接。

在这种情况下，您可以在的 onClick 事件中使用 router.push({YOUR_ROUTE})。

import React from 'react';
import {useRouter} from 'next/router';
import {Menu} from 'antd';

const UsingRouterHook: React.FC = () => {

    const router = useRouter();

    return (
        <Menu mode="horizontal" onClick={() => router.push('/login')}>
            <Menu.Item key="login" >
                <span className="nav-text">Login</span>
            </Menu.Item>

            <Menu.Item key="register" onClick={() => router.push('/register')}>
                <span className="nav-text">Register</span>
            </Menu.Item>
        </Menu>
    );
}

export default UsingRouterHook;

Answer 4

如果您使用的是 React，则可以将 Menu.Item 组件包裹在 Link 标签周围。

import {Link} from "react-router-dom";
...
  <Link to="#">
    <Menu.Item>Your Content</Menu.Item> 
  </Link>

不能用 Link 包装 Menu.Item

Can't wrap a Menu.Item with Link

node.js

reactjs

next.js

antd