Gatsby redirige vers la page d'accueil au lieu d'afficher la page 404

Question

Est-il possible de rediriger l'utilisateur vers la page d'accueil (/) au lieu d'afficher la page 404?

Answer 1

Gatsby crée une page 404 à partir de src/pages/404.jsx (ou 404.js si vous n'utilisez pas l'extension jsx). Donc, créer un composant qui redirige vers la page d'accueil devrait faire l'affaire, quelque chose comme ceci:

import React from 'react';

export default function NotFound() {
  if (typeof window !== 'undefined') {
    window.location = '/';
  }

  return null;
}

Answer 2

D'autres réponses ici échoueront éventuellement car l'objet window n'est pas défini au moment de la génération. Utilisez-le à la place. Le crochet useEffect est équivalent à componentDidMount.

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

export default () => {
  useEffect(() => {
    navigate('/your-redirect/');
  }, []);
  return null;
};

Answer 3

Vous pouvez effectuer les opérations suivantes:

import React from 'react'
import { Redirect } from '@reach/router'

const NotFoundPage = () => <Redirect to="/" />

export default NotFoundPage

Answer 4

Vous pouvez également le faire avec navigate() (anciennement navigateTo(), merci @pgarciacamou)

import React from 'react'
import { navigate } from 'gatsby'

const NotFoundPage = () => {
  return navigate('/')
}

export default NotFoundPage