Le routeur React No Match 404 ne fonctionne pas lorsqu'il est déployé ?

Question

J'ai ajouté une page d'erreur No Match 404 à mon site web, et cela fonctionne bien lorsque je vais au mauvais chemin sur localhost, mais après avoir déployé et être allé à un chemin invalide comme .../invalidpath, j'obtiens l'erreur de page non trouvée par défaut de netlify. Voici mon composant App.js :

import React from 'react';
import { Switch, Route } from 'react-router-dom';
import Navigation from './components/navigation/Navigation';
import Home from './pages/home/Home';
import Projects from './pages/projects/Projects';
import Contact from './pages/contact/Contact';
import NoMatch from './pages/404page/404Page';

import './App.scss';

function App() {
  return (
    <div className='app'>
      <Navigation />
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/projects' component={Projects} />
        <Route path='/contact' component={Contact} />
        <Route path='*' component={NoMatch} />
      </Switch>
    </div>
  );
}

export default App;

Answer 1

Si vous avez construit l'application avec create-react-app et que vous déployez vers Netlify, vous devez ajouter un fichier _redirect à l'intérieur du fichier public de votre projet afin de supporter le routage côté client (React Router). Il devrait contenir ceci :

/*  /index.html  200

Détails aquí