动态路由在使用 Next.js 刷新页面时不起作用

Posted 2023-02-22

【中文标题】动态路由在使用 Next.js 刷新页面时不起作用

【英文标题】：Dynamic route not working on page refresh with Next.js

【发布时间】：2021-06-23 07:40:25

【问题描述】：

我使用的是 Next.js，但动态路由出错。

在我的应用程序中，我使用getStaticPaths、getStaticProps 和这个：

<Link
    href=`/offers/[id]?id=$offer.id`
    as=`/offers/$offer.id`
>
    <a>offer.title</a>
</Link>

当我点击这个链接时，动态路由显示我的页面没有问题。

但是当我刷新同一页面时，我会收到以下消息：

当我寻找解决方案时，答案是我的Link 在点击时没有正确的设置。

但现在我不点击链接，我只是刷新我的页面。

我使用 Next.js 10.0.7

【参考方案1】：

由于 Next.js 9.5.3 不再需要使用 as 进行动态路由。相反，您可以直接使用该值在href 中进行插值。

<Link href=`/offers/$offer.id`>
    <a>offer.title</a>
</Link>

或者，您还可以通过将 URL 对象传递给它来使用不同的 Link 语法。

<Link
    href=
        pathname: '/offers/[id]',
        query:  id: offer.id 
    
>
    <a>offer.title</a>
</Link>

【讨论】：

您好，谢谢您的回答，但我还是有同样的问题。我的链接工作正常，问题来自每次刷新页面时重新加载页面都会给我这个错误。

即使按照我的建议进行更改，您仍然会遇到同样的错误？

你好，是的，但我尝试了一些更改，看看它是否来自我的代码，如果我找到解决方案或我的问题的答案，我可以发布它。

@jeanA 你的链接还能用吗？我的，链接或页面刷新都不起作用。抛出相同的错误。有什么想法吗？

【参考方案2】：

我遇到了类似的问题。但我一直在网站上进行翻译。

因此，当我在任何页面上更改所选语言时，它都可以正常工作，但是一旦我在任何 [id] 页面（项目、文章等）上更改语言，我就会遇到与您相同的错误。

就我而言，问题出在我使用过的router.push() 方法中。 因此，当我通过 router.pathname 时，它会从字面上返回 /articles/[id]。

但实际上我需要使用返回正确 URL 路径的router.asPath，例如/articles/abc123-456zczxc-7890-blablabla。

这是来自 NextJS 文档的示例：

pathname: String - 当前路线。即/pages中的页面路径，不包括配置的basePath或locale。

asPath:String - 浏览器中显示的路径（包括查询），未配置 basePath 或语言环境。

NextJS API Reference Link

【讨论】：

非常感谢！在过去的两天里，我一直在为此苦苦挣扎。 :)

太棒了！很高兴它有帮助。