Gatsby redirect to home page instead of displaying 404 page

Question

Is it possible to somehow redirect the user to the home page (/) instead of displaying the 404 page?

Answer 1

Other answers here will eventually fail because the window object is not defined at build time. Use this instead. The useEffect hook is equivalent to componentDidMount.

import { useEffect } from 'react'; import { navigate } from "@reach/router"  export default () => {   useEffect(() => {     navigate('/your-redirect/');   }, []);   return null; }; 

Answer 2

Gatsby creates 404 page from src/pages/404.jsx (or 404.js if you are not using jsx extension). So, creating a component which redirects to the home page there should do trick, something like this:

import React from 'react';  export default function NotFound() {   if (typeof window !== 'undefined') {     window.location = '/';   }    return null; }