链接组件插值错误 nextjs

如何解决链接组件插值错误 nextjs

我在 Next.js 中收到此错误：

错误：提供的“href”（/subject/[subject]）值缺少要正确插入的查询值（subject）。阅读更多：https://err.sh/vercel/next.js/href-interpolation-failed`。

我有一个设置为 /subject/[subject].tsx 的动态页面。现在在我的导航中，我有：

<Link href={'/subject/${subject}'} passHref><a>{subject}</a></Link>

当我访问具有不同路径的页面时它工作正常，但是当我按下页面上的按钮时，它会引发上面的错误，我认为这是因为组件重新渲染。如果您转到错误中的页面，它会显示：Note: this error will only show when the next/link component is clicked not when only rendered.

我试图寻找解决方案，我尝试这样做：

<Link href={{pathname: '/subject/[subject]',query: {subject: subject}}}></Link>

但没有任何改变。我阅读了文档，似乎 as 道具只是一个不再使用的可选装饰器，所以我看不出它对我有什么帮助。

解决方法

另一种可能的解决方案是使用 router.push 函数重定向：

const myRedirectFunction = function () {

    if (typeof window !== 'undefined') {
        router.push({
            pathname: router.pathname,query: {...router.query,myqueryparam: 'myvalue'},})
    }

}


return (
  <>
    <button onClick={() => {myRedirectFunction()}}> Continue </button>
  </>

)

包含 ...router.query 很重要，因为如果包含 [dynamic] 当前值，那么我们需要保留它。

参考：https://github.com/vercel/next.js/blob/master/errors/href-interpolation-failed.md

,

您最好先null || undefined办理入住手续。

,

@Bentasy，正如您正确指出的那样，页面的任何重新渲染都希望您再次传入动态路由参数。我避免在页面上进行后续点击时重新呈现页面的方法是将页面上的 Link 标记替换为 label 标记。我正在使用 Next Link 标签在此图像上的选项卡之间导航，这产生了同样的错误。所以我用标签标签替换了链接标签，错误就解决了。