How can you conceal the navigation and footer components on a 404 page using Next.js?

Question

How can you conceal the navigation and footer components on a 404 page using Next.js?

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

function CustomLayout({ 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 CustomLayout;

It seems like the methods with an asterisk are not functioning properly. Any suggestions on how to fix this issue? Thank you in advance and best regards to everyone! ;-)

javascript next.js http-status-code-404

Answer 1

Answer №1

If you do not have a customized 404 page, the default value of router.pathname is _error, so the code snippet below should suffice:

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

If you are using a custom 404 page (located at 404.js inside the /pages directory), then the value of router.pathname will be /404.

If you decide to reuse the built-in error page, the value of router.pathname within your page or component will match the current page path.
For example:

import Error from 'next/error'

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

export default MyPage

In this scenario, neither of the methods mentioned above will work properly.
However, I do not recommend utilizing this approach.

Answer 2

If you do not have a customized 404 page, the default value of router.pathname is _error, so the code snippet below should suffice:

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

If you are using a custom 404 page (located at 404.js inside the /pages directory), then the value of router.pathname will be /404.

If you decide to reuse the built-in error page, the value of router.pathname within your page or component will match the current page path.
For example:

import Error from 'next/error'

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

export default MyPage

In this scenario, neither of the methods mentioned above will work properly.
However, I do not recommend utilizing this approach.

Answer 3

Answer №2

I made the decision to include this code snippet here for the benefit of others who may come across a similar issue. Specifically, in scenarios where a custom 404 page is being used, the solution can be implemented as follows:

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;

Answer 4

I made the decision to include this code snippet here for the benefit of others who may come across a similar issue. Specifically, in scenarios where a custom 404 page is being used, the solution can be implemented as follows:

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;

How can you conceal the navigation and footer components on a 404 page using Next.js?

Answer №1

Answer №2

Similar questions

Is there a way to consistently apply default props to a styled component?

I am having trouble displaying SASS styles in the browser after running webpack with node

Hitting a button causes Ajax.load to malfunction

The smooth shading in Three.js is giving off a flat appearance

Include an extra "array" in the complete AJAX POST data when submitting through x-editable

Using Three.js to seamlessly transition from one Panorama Cube to another with a smooth zoom-in effect

What is the code to convert data to base64 in Javascript when it is not a string?

The ng-repeat in the inner loop is excluding the initial element of my array and subsequently placing them in the final HTML tag

ModSecurity Action Causing AJAX Problem

The functionality of Protovis JavaScript is not supported within a dropdownlist's onchange event

Encountering an issue while trying to set up a fresh react application

Angular log out function to automatically close pop-up windows

How to Enhance GraphQL Mutation OutputFields with a Function Generator

Sending Emails with Next.js

Tips on identifying HTML email input validation using JavaScript?

How to Utilize findIndex to Validate the Presence of Elements in an Array of Objects using TypeScript

Is it feasible to conceal certain parameters within a URL using Angular UI Router?

The process of updating JSON data based on changes triggered by DOM events such as drag and drop

Challenge with Angular *ngFor: Struggling to Access Previous Elements

Is a single f.select impacting another f.select in the same form? (undesired)