Next.js如何在404页面隐藏导航栏与Footer组件

失效原因说明 #

你之前的写法不生效是因为 useRouter 返回的 pathname 是实际匹配的页面路径字符串，只会做全等比对，你写的 "/*" 或 "*" 作为普通字符串没有通配符效果，不可能匹配到任何真实访问路径，因此判断逻辑永远不生效。

Pages Router 实现方案（你当前使用的next/router属于Pages Router API） #

最准确的方案是直接用Router实例自带的is404属性判断，不管是自定义404页面，还是动态路由返回的404状态页面，这个属性都会自动变为true，改后代码如下：

import Footer from "./Footer";
import Navigation from "./Navigation";
import { useRouter } from "next/router";

function Layout({ children }) {
  const router = useRouter();
  // 非404页面才渲染导航和Footer
  const showNavFooter = !router.is404;
  return (
    <>
      {showNavFooter && <Navigation />}
      <main className="main-content">{children}</main>
      {showNavFooter && <Footer />}
    </>
  );
}

export default Layout;

如果后续还有其他页面（比如登录页、独立活动页）也需要隐藏导航和Footer，可以加个路径黑名单做扩展：

// 需要隐藏导航和Footer的路径列表
const HIDE_NAV_FOOTER_PATHS = ['/404', '/login', '/special-activity'];

function Layout({ children }) {
  const router = useRouter();
  const showNavFooter = !router.is404 && !HIDE_NAV_FOOTER_PATHS.includes(router.pathname);
  // 后续渲染逻辑同上
}

App Router 可选实现方案 #

如果你后续升级到App Router，有两种更简单的实现方式：

• 利用嵌套Layout机制：将导航、Footer封装到单独的公共Layout组件，只给正常页面引用该Layout，app/not-found.js 单独写不带导航Footer的布局即可
• 如果需要全局判断，可以在客户端组件中用usePathname配合自定义路径黑名单判断，或者通过not-found.js的层级单独控制布局

内容的提问来源于stack exchange，提问作者MarioG8