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

rks48beu  于 2023-03-29  发布在  其他
关注(0)|答案(2)|浏览(143)
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;

不幸的是,带星号的方法不起作用:/?!?
提前感谢并向大家致以最良好的问候;- )

qlvxas9a

qlvxas9a1#

如果您没有使用自定义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

在这种情况下,上面提到的两种方法都不起作用。
但是我不推荐使用这种方法。

5t7ly7z5

5t7ly7z52#

我决定添加这段代码来服务其他遇到同样问题的人。在我的例子中,当我们有自定义404页面时,解决方案看起来像这样=〉

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;

相关问题