Next.js 链接“as”装饰器停止为动态路由工作？

Question

我有一条动态路线：

test/[id].js

当用户单击指向/test/1Next.js 的链接时，最终会按预期呈现正确的页面。

当我想用/test/1其他东西掩盖 url 时，有趣的事情就开始了。

<Link href="/test/1" as="/any/thing/here">

据我了解，上面的代码应该：

• 将用户移动到 test/1 并渲染 test/[id].js，
• 将domain.com/test/1 url隐藏在domain.com/any/thing/here后面。

发生的情况是它根本不指向 test/[id].js，只是返回 404。

带有损坏代码的沙箱链接：

https://codesandbox.io/s/nervous-silence-z62s1?file=/pages/index.js

我在这里做错了什么？我有一个非常长且复杂的网址，其中有很多斜杠，我必须与 Next.js 动态路由一起使用，除了使用“as”之外，我没有看到任何其他解决方案......我非常确定我曾经使用过几年前就成功了！似乎它也适用于这个人：Linking todynamic paths in Next.js

如果 Next.js 更改了某些内容，那么我如何轻松地重新创建此功能？

Answer 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 错误。