gpt4 book ai didi

javascript - 链接组件插值错误 nextjs

转载 作者:行者123 更新时间:2023-12-05 00:26:07 26 4
gpt4 key购买 nike

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

Error: The provided 'href' (/subject/[subject]) value is missing query values (subject) to be interpolated properly. Read more: 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 prop 只是一个不再使用的可选装饰器,所以我看不出它对我有什么帮助。

最佳答案

尝试将用户重定向到语言环境时遇到了同样的问题。我在 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])
}

关于javascript - 链接组件插值错误 nextjs,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65469874/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com