Next.js 自定义 404 页面用于 slug/动态路由

Question

如何在 Next.js 中根据 slug/dynamic 路由设置 404 页面？

我的结构:

📦pages
 ┣ 📂[slug]
 ┃ ┣ 📜404.js // Custom 404 page for that folder/slug
 ┃ ┣ 📜details.js
 ┃ ┣ 📜index.js
 ┣ 📜_app.js
 ┣ 📜contact.js
 ┣ 📜index.js

当然我可以设置全局 404 页面，但不能针对特定的 slug。有什么想法吗？

Answer 1

我在 NextJs 文档中没有看到任何直接的方法。但是如果你想通过一些调整来完成它，你可以使用 router.asPath .您可以选择根据您尝试的路径更改 UI

const Custom404 = () => {
  const router = useRouter();
  let attemptedPath = router.asPath;
  if (attemptedPath.startsWith("/folder")) {
    return <div>Custom UI</div>;
  }
  return <div>Usual UI</div>;
};

编辑:根据您的编辑，一种方法是在您拥有的所有其他路线上添加直接检查。你的 if 条件变化如下:

const existingRoutes = ['/contact','/','/moreRoutes'];
if (!existingRoutes.includes(attemptedPath)) {
    return <div>Custom UI</div>;
  }

注意:如果你有更多的嵌套路由，那么你将不得不同时使用 startsWith 和完整的字符串相等性检查。这完全取决于您的路线。