How To Redirect To Home Page instead Of Displaying 404 Page in Gatsby?

In Gatsby when a user navigates to a non-existent page, they typically see a 404 error page. However, there may be situations where you want to redirect users to the home page (or another specified page) instead of showing the 404 error page. This can be useful for improving the user experience or handling specific routing needs.

In this article, we will explore different ways to achieve a redirection to the home page in place of displaying a 404 page in a Gatsby.js project.

Approach

First of all heck if a 404.js file exists inside the src/pages directory. If it doesn’t exist, create a new 404.js file in the src/pages directory. Import the navigate function from Gatsby. Use the navigate function within a useEffect hook to redirect the user to the home page ("/"). Ensure the redirection occurs immediately when the component renders.

Steps To Create Gatsby Application

Step 1: Install Gatsby CLI

npm install -g gatsby-cli

Step 2: Create a New Gatsby Site

gatsby new my-gatsby-site

Step 3: Navigate to Your Project Directory

cd my-gatsby-site

Project structure

Dependencies

"dependencies": {
    "gatsby": "^5.13.7",
    "gatsby-plugin-image": "^3.13.1",
    "gatsby-plugin-manifest": "^5.13.1",
    "gatsby-plugin-sharp": "^5.13.1",
    "gatsby-source-filesystem": "^5.13.1",
    "gatsby-transformer-sharp": "^5.13.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
"devDependencies": {
    "prettier": "^2.8.8"
  }

Steps for Redirecting to Home Page instead of displaying 404 page in Gatsby

Step 1: Navigate to Your 404.js File:

By default Gatsby creates a 404.js file in the src/pages folder. If it doesn’t exist, create one inside the src/pages directory.

Step 2: Use Gatsby's navigate Function:

Gatsby provides the navigate function to handle redirection. We can use this to redirect the user to the home page.

Example: This example demonstrates the redirection of home page instead of displaying 404 page in Gatsby:

// src/pages/404.js

import React, { useEffect } from 'react';
import { navigate } from 'gatsby';

const NotFoundPage = () => {
    useEffect(() => {
        // Redirect to the home page
        navigate('/');
    }, []);

    return (
        <div>
            <h1>Page Not Found</h1>
            <p>Redirecting to the home page...</p>
        </div>
    );
};

export default NotFoundPage;

// src/pages/index.js

import React from "react";

const HomePage = () => (
    <div>
        <h1>Welcome to the Home Page</h1>
        <p>This is the home page of your site.</p>
    </div>
);

export default HomePage;

// src/pages/page-2.js

import * as React from "react"
import { Link } from "gatsby"

import Layout from "../components/layout"
import Seo from "../components/seo"

const SecondPage = () => (
    <Layout>
        <h1>Hi from the second page</h1>
        <p>Welcome to page 2</p>
        <Link to="/">Go back to the homepage</Link>
    </Layout>
)

export const Head = () => <Seo title="Page two" />

export default SecondPage

Step 3: Build and Deploy Your Gatsby Site:

After implementing the redirection logic, run the following commands to build and serve your site:

gatsby build
gatsby serve 

Output: In below example, when you type an existing page URL like /page-2, it will display that page's content. However, if you type a non-existing URL, the browser will automatically redirect you to the home page.