Next.js - 如何隐藏 404 页面上的导航和页脚组件？

Question

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

function Layout({ children }) {
  const router = useRouter();
  return (
    <>
      {router.pathname !== "/*" && <Navigation />}
      {/* {router.pathname !== "*" && <Navigation />} */}
      <main className="main-content">{children}</main>
      {router.pathname !== "/*" && <Footer />}
      {/* {router.pathname !== "*" && <Footer />} */}
    </>
  );
}

export default Layout;

不幸的是，带有星号的方法不起作用：/？！？

预先感谢您并向大家致以最诚挚的问候;-)

Answer 1

如果您没有使用自定义 404 页面，则默认router.pathname是_error这样

{router.pathname !== "/_error" && <Navigation />}

应该管用。

如果您使用的是自定义 404 页面（内部为 404.js /pages）。router.pathname/404

如果您在页面或组件中 重用内置的错误页面， 则将是当前页面路径。 前任 ：router.pathnamerouter.pathname

import Error from 'next/error'

const MyPage = ({isError = true})=>{
    // pagepath would be something like pages/mypage
    return isError ?  <Error statusCode={"404"} /> : <p>My page </p>
}

export default MyPage 

在这种情况下，上述两种方法都不起作用。
不过我不建议使用这种方法。