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.pathname，则router.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 

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

Answer 2

我决定添加这段代码，以便为遇到同样问题的其他人提供服务。在我的例子中，当我们有custom404页面，解决方案如下=>

import Footer from "./Footer";
import Navigation from "./Navigation";
import { useRouter } from "next/router";
function Layout({ children }) {
const router = useRouter();
return (
<>
{router.pathname !== "/404" && <Navigation />}
<main className="main-content">{children}</main>
{router.pathname !== "/404" && <Footer />}
</>
);
}
export default Layout;