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

Question

我使用的是 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

Answer 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>