IT技术 - 动态路由无法使用 Next.js 刷新页面 - 吾爱随笔录

IT技术 reactjs next.js next-router

2021-05-20 02:08:08

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

2个回答

由于 Next.js9.5.3不再需要as用于动态路由。相反，您可以直接使用该值在href.

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

或者，您也可以Link通过向其传递 URL 对象来使用不同的语法。

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

我有一个类似的问题。但我一直在网站上进行翻译。

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

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

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

这是 NextJS 文档中的一个示例：

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

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

其它你可能感兴趣的问题