javascript - 当您想使用 Link 组件时，外部链接在 Next.js 中不起作用

Question

我很惊讶一个简单的Link组件在 Next.js 中不起作用当您想使用外部 URL 和 HTML Button tag 时在里面。

下面你可以看到我是如何尝试解决这个问题的:

方法 1 :

<Link href="https://stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

方法 2 (没有协议(protocol)的链接):

<Link href="//stackoverflow.com/">
  <button>StackOverflow</button>
</Link>

方法 3 (链接没有协议(protocol)和链接属性 prefetch 设置为 false 甚至 true ):

<Link href="//stackoverflow.com/" prefetch={false}>
  <button>StackOverflow</button>
</Link>

重要提示

当然，提到的情况下，当 URL 是内部的时它可以工作，就像这样:

<Link href="/stackoverflow">
  <button>StackOverflow</button>
</Link>

或者当我将 HTML 按钮标签更改为 HTML A tag 时， 像那样:

<Link href="//stackoverflow.com/">
  <a>StackOverflow</a>
</Link>

就我而言，我想在 Next.js Link 组件中使用 HTML 按钮标记或任何其他 UI 组件。

Answer 1

1. Next.js Link 组件内部UI组件的解决方案。
我已经更详细地研究了 Next.js 文档，并且我发现了一个非常有用的属性，可以在 Link 组件中为任何内部 UI 组件(Semantic UI、Material UI、Reactstrap 等)创建外部链接。
让我们以一个简单的语义 UI 按钮组件为例。
要将外部链接添加到 Next.js Link 组件，我们应该使用属性 passHref .此属性设置为 false默认。此属性强制 Link 发送 href属性(property)给它的 child 。

import { Button } from 'semantic-ui-react';
import Link from 'next/link';    

const Example = () => (
  <Link href="https://stackoverflow.com/" passHref={true}>
    <Button>StackOverflow</Button>
  </Link>
)

export default Example;

2. HTML元素的解决方案(与标签A不同)
在 Next.js 文档中，您可以找到以下句子:

External URLs, and any links that don't require a route navigation using /pages, don't need to be handled with Link; use the anchor tag for such cases instead.

而且我必须写它是显而易见的，所以在这种情况下，如果您需要使用任何其他标签，例如 HTML 按钮，您应该使用 onClick没有链接组件的事件。
上面的代码将如下所示:

const clickHandle = () => {
  document.location.href = 'https://stackoverflow.com/';
}

const Example = () => (
  <button onClick={clickHandle}>StackOverflow</button>
)

export default Example;

更新 :
当然，我同意开发人员的观点，他们认为对于外部链接，我们不应该使用 Link 组件。这里最好的解决方案是只使用纯 HTML a点击事件上的标签或 JS 重定向解决方案，如第 2 点所示(或任何类似方式)。值得一提的是，您可以构建自己的组件并基于传递的 href属性你可以在Link之间切换组件和 HTML a标签，像这样:

  // custom simple smart Link component
  import Link from 'next/link'; 
  
  const SmartLink = (link, url) => {
    const regEx = /^http/;

    return regEx.test(url) ? <Link href={url}>{link}</Link> : <a href={url}>{link}</a>;
  }
  
  export default SmartLink;

  // ways to call the component
  import SmartLink from 'path/to/SmartLink'; // set correct path

  // somewhere inside the render method
  // the below will use HTML A tag
  <SmartLink href="https://stackoverflow.com" link="external StackOverflow website" />
  // the below will use Next.js Link component
  <SmartLink href="/stackoverflow" link="internal StackOverflow page" />