NextJS：如何从 url 导航到自定义路径？

Question

我有一个菜单组件用于在我的网站内部导航，例如：

<Link href="/containers/grades/List" as="/grades">

我使用“as”来保持 URL 干净，但问题是导航页面无法刷新；如果我刷新页面，我会收到 404 错误。

我知道“as”用于在 URL 中显示自定义地址，但在这种情况下我需要一种从 URL 访问组件的方法，我想从 导航"/grades"到"/containers/grades/List"

有什么建议吗？

Answer 1

如果<Link href="/containers/grades/List" as="/grades">您有客户端路由，并且对于服务器端，只需将以下代码添加到您的 next.config.js 中即可；

 experimental: {
      async rewrites() {
        return [
          { source: '/grades', destination: '/containers/grades/List' }
          ];
       }
    }

这会将它们连接起来。