Question

我当前在主标题导航中使用的是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>

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

我不确定如何解决此问题，并使菜单项可单击使菜单正确呈现，因此，我希望获得一些帮助。

Answer 1

问题似乎已经以某种方式解决了，早些时候我碰到了目前无法重现的另一个问题。

Answer 2

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

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

Answer 3

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

将代码更改为此：

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

无法使用链接包装Menu.Item

3 个答案: