NextJS 链接“as"属性不会在重新加载时打开页面 [英] NextJS Link "as" property doesnt open the page on reload

问题描述

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

I'm new to NextJS, Since nextjs has its own router, I wanted to go to a page but the url should be different

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

这里我的关于文件位于名为 About.js 的关于文件夹中.所以我可以在 href 中将其称为/About/About.但我想将 URL 显示为/about-page.

Here my about the file is in the About Folder named About.js. So I can call it in the href as /About/About. But I want to URL to display as /about-page.

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

Which works as expected. But when I reload that page, it shows 404 Not Found. Which makes sense because /about-page is just an alias. the real page is /About/About.

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

So how do I solve this issue?

感谢任何建议.

推荐答案

您可以使用 重写 在您的 next.config.js 中，使特定 URL 指向特定页面:

You can use rewrites in your next.config.js to make a specific URL point to a specific page:

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

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

If you want to export your app with next export, then you can rather use exportPathMap :

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

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

Do not forget to set trailingSlash: true or your custom paths without .html will not work.

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

You can remove the line "/about-page": { page: "/about-page" }, to make your about page only accessible from /About/About.

这篇关于NextJS 链接“as"属性不会在重新加载时打开页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！