0

我有一条动态路线：

test/[id].js

当用户单击指向/test/1Next.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

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

如果 Next.js 改变了一些东西，那么我如何轻松地重新创建这个功能？

4

1 回答 1

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。

于 2021-07-01T10:52:50.213 回答