NextJS 链接 href 默认值答案

【问题标题】：NextJS Link href default valueNextJS 链接 href 默认值
【发布时间】：2021-10-06 05:00:11
【问题描述】：

我需要 Next/Link 的默认 href 值，就像我们在下面的纯 html 中所做的那样

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

我对@987654322@ 进行了尝试，但它会重新加载页面，如果我将其保持为空，则会产生一些错误，因为它的必需属性

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

实际上，我正在映射一个集合，其中某些项目没有href，因此我需要将其留空并在点击时显示一些警报；

【问题讨论】：

【解决方案1】：

结论

如果您使用的是动态路由，

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

将解决您的问题。

Next.js 仅在链接是本地链接时预取 href。

当 href 不以“/”、“?”或“#”开头时，Next.js 会构造 URL 和 checks if the URL is external or not。

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

当您将空字符串作为 href 传递时，Next.js 认为链接指向本地 URL，因此会尝试预取页面，如果您有动态路由，则会失败。

当您在<Link> 中使用javascript:; 作为href 时，Next.js 会禁用预取并修复问题。

虽然 Next.js 提供了预取选项，但即使您指定了prefetch={false}，悬停链接元素时仍会发生预取，这会导致问题。

【讨论】：

【解决方案2】：

如果你使用<Link href=''></Link>，它不会产生任何错误，因为它有它的必需属性并且它的值等于''。

【讨论】：

但在点击时会产生一些错误，例如“提供的href (/products/[product]) value is missing query values (product) to be interpolated properly.
是的，我现在明白了。当我们有嵌套路由时会发生这种情况。你不能改用router.push 吗？这与您的问题类似：https://stackoverflow.com/questions/65469874/link-component-interpolation-error-nextjs
这不是我想要的，它应该有一些默认值，因为我们用来处理 html 中的锚标记
你不能这样做。您设置为默认值的任何值都将被视为查询。默认值（类似于 HTML 中的锚标记）适用于不包含查询的情况。所以你应该在使用<Link>标签之前检查[product]是否存在，如果存在，将/products/[product]传递给href。