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

Question

Est-il possible de rediriger d'une manière ou d'une autre l'utilisateur vers la page d'accueil ( / ) au lieu d'afficher la page 404 ?

Answer 1

Les autres réponses ici échoueront éventuellement parce que le window n'est pas défini au moment de la construction. Utilisez ceci à la place. Le site useEffect est équivalent à componentDidMount .

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

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

Answer 2

Vous pouvez procéder comme suit :

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

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

export default NotFoundPage

Answer 3

Gatsby crée une page 404 à partir de src/pages/404.jsx (ou 404.js si vous n'utilisez pas jsx extension). Ainsi, la création d'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 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