NextJS 链接“as”属性在重新加载时不会打开页面答案

【问题标题】：NextJS Link "as" property doesnt open the page on reloadNextJS 链接“as”属性在重新加载时不会打开页面
【发布时间】：2021-05-06 08:57:33
【问题描述】：

我是NextJS的新手，由于nextjs有自己的路由器，我想去一个页面但是url应该不同

 <Link href="/About/About" as="/about-page">
        <a>
          Who We Are <img src="svgIcons/down-arrow.svg" alt="" />
        </a>
  </Link>

我的 about 文件位于名为 About.js 的 About 文件夹中。所以我可以在href中将它称为/About/About。但我希望 URL 显示为 /about-page。

按预期工作。但是当我重新加载该页面时，它显示 404 Not Found。这是有道理的，因为 /about-page 只是一个别名。真正的页面是/About/About。

那么我该如何解决这个问题呢？

感谢任何建议。

【问题讨论】：

这违背了 NextJS 文件结构路由，其中文件结构/src/pages/about.jsx 路由到/about。也就是说，您可以使用redirects 作为解决方法。但我不明白你为什么要指向/About/About 重定向到/about-page，而你可以在href 属性中指向/about-page 并将你的文件设为about-page.jsx。

标签： javascript reactjs next.js

【解决方案1】：

您可以在next.config.js 中使用rewrites 使特定的URL 指向特定的页面：

module.exports = {
  async rewrites() {
    return [
      {
        source: "/About/About",
        destination: "/about-page",
      },
    ];
  },
};

如果您想使用next export 导出您的应用程序，那么您可以使用exportPathMap：

module.exports = {
  trailingSlash: true,
  exportPathMap: async function () {
    return {
      "/": { page: "/" },
      "/about-page": { page: "/about-page" },
      "/About/About": { page: "/about-page" },
    };
  },
};

不要忘记设置trailingSlash: true，否则没有 .html 的自定义路径将不起作用。

您可以删除"/about-page": { page: "/about-page" }, 行，使您的关于页面只能从/About/About 访问。

【讨论】：