无法用链接包装 Menu.Item答案

【问题标题】：Can't wrap a Menu.Item with Link无法用链接包装 Menu.Item
【发布时间】：2022-02-08 22:06:30
【问题描述】：

我目前使用Menu 进行主标题导航，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>

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

我不知道如何解决这个问题以及如何使菜单正确呈现且菜单项可点击，因此我很想在这方面获得一些帮助。

【问题讨论】：

标签： node.js reactjs antd next.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用“next/router”中的钩子“useRouter”来管理链接不足的链接。

在这种情况下，您可以在

的 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;

【讨论】：

【解决方案4】：

您的链接组件语法无效。你应该这样使用： <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>

【讨论】：

他正在使用NextJS Link 组件，而不是来自react-router-dom。
我没有看到 next.js 标签，但是这个例子在 antd 中可以正常工作。
这会使菜单正确呈现，但也会使菜单项无法点击，因此路由不起作用。