Внешняя ссылка не работает в Next. js, если вы хотите использовать компонент Link.

Question

Я был очень удивлен, что простой Link компонент не работает в Next. js, когда вы хотите использовать внешний URL-адрес и HTML Button tag внутри it.

Ниже вы можете увидеть, как я пытался решить проблему:

Подход № 1 :

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

Подход № 2 (ссылка без протокола):

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

Подход № 3 (ссылка без протокола и с атрибутом Link prefetch, установленным на false или даже true) :

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

ВАЖНОЕ ПРИМЕЧАНИЕ

Конечно, упомянутый случай работает, когда внутренний URL-адрес, например:

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

или когда я заменим тег кнопки HTML на HTML тег , например:

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

В моем случае я хочу использовать тег кнопки HTML или любой другой другой компонент пользовательского интерфейса внутри Next. js Ссылочный компонент.

Answer 1

1. Решение для компонентов пользовательского интерфейса внутри Next. js Ссылочный компонент.

Я изучил документацию Next. js более подробно, и я нашел очень полезный атрибут для создания внешней ссылки для любого внутреннего пользовательского интерфейса. компоненты ( Semanti c UI , UI материала , Reactstrap , et c.) внутри компонента Link.

Давайте примем как пример простого компонента кнопки Semanti c UI. Чтобы добавить внешнюю ссылку в компонент Next. js Link, мы должны использовать атрибут passHref . Этот атрибут по умолчанию имеет значение false. Этот атрибут заставляет Link отправлять свойство href своему дочернему элементу.

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 вы можете найти следующие предложения:

Внешние URL-адреса и любые ссылки, которые не требует навигации по маршруту с помощью / страниц, не требует обработки с помощью Link; вместо этого используйте тег привязки для таких случаев.

И я должен написать, что это очевидно, поэтому в этом случае, если вам нужно использовать любой другой тег, например, кнопку HTML, Вы должны использовать событие onClick без компонента Link. Приведенный выше код будет выглядеть следующим образом:

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

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

export default Example;

Я надеюсь, что такого рода объяснения и подход помогут тем, кто будет бороться с подобными заблуждениями.

Answer 2

Компонент Link предназначен только для связи между страницами вашего следующего приложения. Передача внешнего URL-адреса не поддерживается, поэтому выдается сообщение об ошибке, которое ссылается на эту страницу , включая этот раздел:

Почему произошла эта ошибка

Next. js предоставляет маршрутизатор, который можно использовать через компонент, импортированный через next / link, обертку withRouter (Component) и теперь хук useRouter (). Предполагается, что при использовании любого из них они используются только для внутренней навигации, т. Е. Для навигации между страницами в одном и том же приложении Next. js.

Либо вы передали внешнюю ссылку в ссылку next / компонент или вы назвали Router # pu sh или Router # вместо одного.

Недействительные ссылки содержат внешние сайты (https://google.com) и mailto: ссылки. В прошлом использование этих недействительных ссылок могло бы остаться незамеченным, но, поскольку они могут вызывать неожиданное поведение. Теперь мы показываем для них предупреждение в процессе разработки.

Если вы визуализируете <a> внутри, href передается на него и работает, как и ожидалось, с использованием собственного поведения браузера, но другие элементы не могут используйте его, чтобы вам пришлось самостоятельно разобраться с этим делом.

Я бы посоветовал взглянуть на то, чего вы пытаетесь достичь - что не так с использованием тега <a>? Похоже, правильный инструмент для работы.