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

问题描述

我有一条动态路线：

test/[id].js

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

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

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

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

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

发生的情况是它根本不指向 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 更改了某些内容，那么我如何轻松地重新创建此功能？

解决方法

我认为您需要这样写 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。

javascript next-router