NextJS Link href значение по умолчанию

Question

Мне нужно значение href по умолчанию для Next / Link, как мы это делаем в обычном html, как показано ниже

      <a href='#' ></a>

Я пробовал это Link но он перезагружает страницу, если я оставлю ее пустой, это приведет к ошибке, потому что ее обязательный атрибут

      <Link href='#'></Link>

На самом деле я отображаю коллекцию, в которой некоторые элементы не имеют href поэтому мне нужно оставить его пустым и показывать какое-то предупреждение при щелчке;

Answer 1

Вывод

Если вы используете динамическую маршрутизацию,

      <Link href="javscript:;"></Link>

решит вашу проблему.

Объяснение

Next.js выполняет предварительную выборку href только в том случае, если ссылка является локальной.

Если href не начинается с «/», «?» или «#», Next.js создает URL-адрес и проверяет, является ли URL-адрес внешним или нет .

      const resolved = new URL(url, locationOrigin)
return resolved.origin === locationOrigin && hasBasePath(resolved.pathname)

Когда вы передаете пустую строку в качестве href, Next.js считает, что ссылка нацелена на локальный URL-адрес, поэтому пытается выполнить предварительную выборку страницы и терпит неудачу, если у вас есть динамическая маршрутизация.

Когда вы используете javascript:;как href в <Link>, Next.js отключает предварительную выборку и устраняет проблему.

Хотя Next.js предоставляет опцию предварительной выборки, предварительная выборка по-прежнему происходит при наведении курсора на элемент ссылки, даже если вы укажете prefetch={false}, что вызывает проблему.

Answer 2

Если вы используете <Link href=''></Link> он не вызовет никаких ошибок, так как у него есть обязательный атрибут и его значение равно ''.