下一页 JS 链接"as"属性在重新加载时无法打开页面

Question

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

<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

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

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

请多多指教。

Answer 1

您可以在您的next.config.js中使用重写，使特定的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/About访问。