当 Next/Link 是按钮的子级时，如何修复它的意外行为？

Question

当我在应用程序中使用 next/link 时，我遇到了一些问题。

我有一个可重用的组件来呈现按钮。该组件在页面上使用两次，每次使用不同的 url。

当页面处于桌面视图时，该按钮可以正常工作。我可以从一个页面导航到另一页面。当我将屏幕尺寸缩小到平板电脑或移动设备时，其中一个会正确重定向，而另一个则不会按预期响应。

为了解决这个问题，我将该区域包含在链接内，以便用户可以单击按钮区域之外，但仍然会被定向到该页面，但这并不是我真正想要向用户提供的体验。

我以前从未有过这个。有人可以告诉我如何解决这个问题或者为什么会出现这种情况吗？谢谢。

const Banner = ({
  purpose,
  imageUrl,
  title1,
  title2,
  desc1,
  linkName,
  buttonText,
}) => {
  return (
    <div className="row flex-lg-row-reverse align-items-center g-5  justify-content-center">
      <div className=" col-10 col-sm-8 col-lg-6">
        <Image
          className="d-block img-fluid mx-lg-auto"
          src={imageUrl}
          width={700}
          height={500}
          alt="banner"
          loader={myLoader}
        />
      </div>
      <Link href={linkName} passHref>
        <div className="col-lg-4 p-3 text-center text-lg-start border-0">
          <h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
          <p className="lead">
            {title1}
            <br /> {title2}
          </p>
          <p className="lead">{desc1}</p>

          <button className="btn link btn-primary btn-xl w-100">
            <Link href={linkName} passHref>
              <a> {buttonText}</a>
            </Link>
          </button>
        </div>
      </Link>
    </div>
  );
};

export default function Home({ data }) {
  const {
    results: {
      client: { secondhandListing },
    },
  } = data;
  //console.log('index page results',secondhandListing);

  return (
    <>
      <div
        data-spy="scroll"
        data-bs-target="main-nav"
        data-offset="0"
        className="scrollspy-example"
        tabIndex="0"
      >
        <Services />
        <div className="section d-flex justify-content-center my-5">
          <h1 className="my-5" id="#scrollspyHeading2">
            Properties
          </h1>
        </div>
        <div className="container-fluid d-flex  justify-content-xxl-between align-items-center flex-wrap flex-lg-nowrap">
          <div className="section d-flex">
            <Banner
              purpose="Rent a Home"
              title1="Rental Homes for"
              title2="Everyone"
              desc1="Explore Apartments, Villas, Homes"
              desc2="and more"
              buttonText="Explore Renting"
              linkName="/search?operationType=rent"
              imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
            />
          </div>
          <div className="section d-flex">
            <Banner
              purpose="Buy a Home"
              title1="Find, Buy & Own"
              title2="Your Dream Home"
              desc1="Explore Apartments, Villas, Homes"
              desc2="and more"
              buttonText="Explore Buying"
              linkName="/search?operationType=sale"
              imageUrl="https://bayut-production.s3.eu-central-1.amazonaws.com/image/145426814/33973352624c48628e41f2ec460faba4"
            />
          </div>
        </div>
        <Team />
        <Contact />
      </div>
    </>
  );
}

Answer 1

运行new-linkcodemod 以自动将以前版本的 Next.js 升级到新<Link>用法：

npx @next/codemod new-link .

这将更<Link><a id="link">Home<a></Link>改为<Link id="link">Home</Link>.

或者，您可以添加legacyBehaviorprop <Link legacyBehavior><a id="link">Home<a></Link>。

Answer 2

<button>并且<a>不允许交互式内容成为他们的内容。

也就是说，您将 invalid 传递children给<Link>组件和元素<button>：

  <Link href={linkName} passHref>
    <div className="col-lg-4 p-3 text-center text-lg-start border-0">
      <h1 className="display-6 fw-bold lh-1 mb-3">{purpose}</h1>
      <p className="lead">{title1}<br /> {title2}</p>
      <p className="lead">{desc1}</p>
      
      {/* Invalid child */}
      <button className="btn link btn-primary btn-xl w-100">
        {/* Invalid child */}
        <Link href={linkName} passHref>
         <a> {buttonText}</a>
        </Link>
      </button>
    </div>
  </Link>

这可能就是您的组件行为异常的原因。

附言。格式化代码有助于提高代码的可读性。:)。您可以通过设置ESLint和Prettier来做到这一点。