全新安装 create-next-app 后，无效的 href 传递给路由器错误

Question

使用 create-next-app 在我的本地计算机上安装 nextjs 应用程序后，我在控制台 Invalid href passed to router 中收到此错误。

有人知道怎么解决吗？

我尝试在 Link 组件中使用 to 属性而不是 href 属性，但它没有帮助。

Answer 1

问题是 nextjs 不适用于外部 links，这就是控制台抛出错误的原因。

当我删除所有外部 link 而添加内部 link 时，一切正常。

Answer 2

是的，nextjs 会抛出该错误。如果 linking 到外部源，则根本不要使用该组件，对于外部 link，您可以使用标签。在您的情况下，我们可以有条件地呈现一个普通的锚标记，或者如果道具与内部路由匹配，则使用 link 组件。 例如：

Link.indexOf('http') == 0 ? return(<a href={prop}>regular link</a>) : return(<Link>...</Link>)

Answer 3

您必须设置参数prefetch={false}

<Link key={index} href={value} prefetch={false}>
                <a target={"_blank"}>
                    {icon}
                </a>
            </Link>

Answer 4

从外部 url 中删除协议 http 或 https 可解决此问题

例子 https://whosebug.com/ 应该是 //whosebug.com/

Answer 5

"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."

文档中给出：https://nextjs.org/docs/api-reference/next/link

Answer 6

根据此文档https://github.com/vercel/next.js/blob/master/errors/invalid-href-passed.md

可能的修复方法 查找正在传递非内部 href 的 next/link 或 next/router 的任何用法，并将它们替换为锚标记 () 或 window.location.href = YOUR_HREF.