Next.js slug/dynamic 路由的自定义 404 页面

Question

如何根据 slug/dynamic 路由在 Next.js 中设置 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 和完整的字符串相等性检查。这完全取决于您的路线。

Next.js slug/dynamic 路由的自定义 404 页面

Next.js custom 404 page for slug/dynamic route

next.js