Question

我的工作是在仪表板项目上工作，需要您的帮助。在我的应用程序中使用了React，nextjs和material-ui。在该网站上，定义了带有可点击链接的菜单，用于在页面之间进行导航。

但是，我无法正确使用<Link>中的next/link。

在我的应用程序中，我需要使用<Link/>之类的东西：

import Foo from './foo';
[...]
<Link href="/about" passHref>
  <Foo />
</Link>
[...]

<Foo/>在另一个文件中定义，并且包含<a>。即使我通过passHref，也无法单击我的链接。

在现实生活中，我的应用程序更复杂，并且使用了material-ui，但是这个真正简化的版本似乎存在问题：https://gist.github.com/Oyabi/4aea0ce2fa36029868641d147ba9e551

如果要点关闭或将来移除，请在此处输入代码：

pages / index.jsx：

import React from "react";
import Menu from "../components/Menu";

function Home() {
  return <Menu />;
}

export default Home;

components / Menu.jsx：

import React from "react";
import Link from "next/link";
import MenuItem from "./MenuItem";

function Menu() {
  return (
    <Link href="/about" passHref>
      <MenuItem />
    </Link>
  );
}

export default Menu;

components / MenuItem.jsx：

import React from "react";
import Link from "next/link";

function MenuItem() {
  return (
    <div>
      <a>not ok - link is not clickable even if the following lines are commented</a>

      <br />

      <Link href="/about" passHref>
        <a>ok - link is clickable</a>
      </Link>

      <Link href="/about" passHref>

        <a>ok - link is clickable</a>
      </Link>

      <Link href="/about" passHref>
        <div className="useless">
          foo
          <a>even with something more complicated</a>
          <br />
          <a>the 2 links are clikable</a>
          bar
        </div>
      </Link>
    </div>
  );
}

export default MenuItem;

如果我将<a>包围在同一文件中的<Link>之间，则一切正常，并且可以按需工作，但是如果我在组件上应用<Link>，则不是这种情况。如您所见，即使我设置了passHref。

如何使<Link>在Menu.jsx中工作？

致谢。

<link />未在儿童中传播

0 个答案: