链接组件插值错误 nextjs答案

【问题标题】：Link component interpolation error nextjs链接组件插值错误 nextjs
【发布时间】：2020-12-27 19:56:52
【问题描述】：

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

错误：提供的“href”（/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 道具只是一个不再使用的可选装饰器，所以我看不出它对我有什么帮助。

【问题讨论】：

会不会是语法问题？ <Link href={`/subject/${subject}`} passHref><a>{subject}</a></Link> 适合我（带有反引号而不是单引号的字符串）。
不是因为本站代码格式的原因我使用了单引号，在代码中我确实使用了反引号。

标签： javascript reactjs next.js

【解决方案1】：

另一种可能的解决方案是使用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 很重要，因为其中包含[动态] 当前值，因此我们需要保留它。

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

【讨论】：

哇，我遇到了同样的神秘错误（参考文档完全没有帮助）。但是神奇的“...router.query”也可以修复 WFM。当我推送到另一个不需要（或不想要）我在当前页面上的查询字符串参数的页面时，为什么需要它仍然有些迷惑。不过谢谢！
似乎是 nextjs AFAICT 中的一个错误 - 尝试了最新版本 10.0.9，但仍然存在同样的问题

【解决方案2】：

我在尝试将用户重定向到语言环境时遇到了同样的问题。我在useEffect 中做到了。经过调查，我发现在第一次渲染时router.query 是空的，所以它缺少必填字段id。我使用router.isReady修复它

export const useUserLanguageRoute = () => {
  const router = useRouter()

  useEffect(() => {
    const {
      locales = [],
      locale,
      asPath,
      defaultLocale,
      pathname,
      query,
      isReady // here it is
    } = router

    const browserLanguage = window.navigator.language.slice(0, 2)

    const shouldChangeLocale =
      isReady && // and here I use it
      locale !== browserLanguage
      && locale === defaultLocale
      && locales.includes(browserLanguage)

    if (shouldChangeLocale) {
      router.push(
        {
          pathname,
          query,
        },
        asPath,
        { locale: browserLanguage }
      )
    }
  }, [router])
}

【讨论】：

【解决方案3】：

您最好事先进行null || undefined 登记。

【讨论】：

<Link href={subject ? `/subject/${subject}` : "/"} key={subject} passHref> 我试过这个，但它似乎对我没有帮助。这是你的意思吗？我正在获取主题数据客户端。
我还有一个/book/[pid].tsx 页面，当我打开它并按下任何按钮时，它会显示相同的错误：Error: The provided `href` (/book/[pid]) value is missing query values (pid) to be interpolated properly. Read more: https://err.sh/vercel/next.js/href-interpolation-failed
在动态路由的情况下：` 有效链接 `

【解决方案4】：

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

【讨论】：