Nextjs 动态设置所有路由路径

Question

在工作中，

我们有一个像这样的文件夹路径：

pages/user/login.js

我们想把它移到 http://example.com/login

但链接标签和文件夹结构应该保持不变。 我们应该还在使用

<Link href="/user/login">

但它应该显示为http://example.com/login。 这应该在没有任何文件夹结构更改的情况下完成！ 我们无法替换href，也无法将user.js 移动到根目录。

我的同事是 nextjs 的新手，他们拒绝在没有此功能的情况下切换。 （CTRL+SHIFT+H（全部替换）太费时间了，所以我们花了 8x3 小时来解决这个问题）

我们尝试过 next.config redirects 和 rewrites 无济于事。

   module.exports = {
      async rewrites() {
        return [
          {
            source: "/login",
            destination: "/user/login",
          },
          {
            source: "/register",
            destination: "/user/register",
          },
        ];
      },
    };
    // not working: <Link href="login"/>

Answer 1

rewrites 仅用于服务器，不影响客户端路由。

要为您的客户端路由提供相同的逻辑，您可以将 as 属性添加到您的 Links，这是地址栏中将显示的路径的装饰器。

<Link href="/user/login" as="/login" />