我有一条动态路线:
test/[id].js
当用户点击指向 /test/1
Next.js 的链接时,最终会按预期呈现正确的页面。
当我想用其他任何东西屏蔽 /test/1
url 时,有趣的事情就开始了。
<Link href="/test/1" as="/any/thing/here">
据我了解,上面的代码应该:
发生的情况是它根本不指向 test/[id].js,只是返回 404。
带有损坏代码的沙盒链接:
https://codesandbox.io/s/nervous-silence-z62s1?file=/pages/index.js
我在这里做错了什么?我有一个非常长且复杂的 url,有很多斜杠我必须与 Next.js 动态路由一起使用,除了使用“as”之外,我没有看到任何其他解决方案......我很确定我曾经使用过几年前,它刚刚奏效!似乎它也适用于这个人:Linking to dynamic routes in Next.js
如果 Next.js 更改了某些内容,那么我如何轻松地重新创建此功能?
答案 0 :(得分:1)
我认为您需要这样写 href
:
<Link
href="/test/[id]?id=1"
// Or like that
href={{
pathname: '/test/[id]',
query: { id: '1' }
}}
as="/any/thing/here"
>
<a>Link to test/1 - 'as' decorator is broken?</a>
</Link>
我不确定为什么它会这样工作,但我前段时间在某处看到它,从那时起我就这样使用它。我认为文档中没有关于它的信息。
并确保 /any/thing/here
页面也确实存在,否则如果用户在客户端导航后刷新浏览器,无论如何都会出现 404。