Résolu : la page de rechargement du routeur de réaction est introuvable

Le principal problème lié à la page de rechargement React Router introuvable est que lorsqu'un utilisateur actualise la page, le navigateur tente de faire une demande au serveur pour l'URL actuelle. Cependant, étant donné que React Router est un routage côté client, il n'y a pas de route de serveur correspondante pour l'URL et donc une erreur 404 Not Found est renvoyée. Cela peut être particulièrement problématique si les utilisateurs s'attendent à ce que certains contenus apparaissent lors de l'actualisation.

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />

      {/* Page Not Found */}
      <Route render={() => (<h1>Page not found</h1>)} />

    </Switch>
  </Router>  
);

// Ligne 1 : cette ligne importe les composants BrowserRouter, Route et Switch de la bibliothèque react-router-dom.

// Ligne 3 : Cette ligne définit une fonction appelée App qui renvoie le code JSX.

// Ligne 5 : cette ligne encapsule l'intégralité du code JSX dans un composant Router de react-router-dom.

// Ligne 6 : cette ligne encapsule toutes les routes dans un composant Switch de react-router-dom.

// Lignes 7 – 9 : ces lignes définissent respectivement deux routes pour '/' et '/about' avec leurs composants respectifs (Home et About).

// Lignes 11 – 12 : ces lignes définissent une route lorsqu'aucune autre route ne correspond, ce qui génère une balise h1 indiquant "Page introuvable".

Erreur de page introuvable

L'erreur de page introuvable dans React Router est une erreur qui se produit lorsqu'un utilisateur tente d'accéder à une page ou à un itinéraire qui n'existe pas. Cela peut se produire si l'utilisateur a mal saisi l'URL ou si la page à laquelle il tente d'accéder a été supprimée ou déplacée. Dans React Router, cette erreur est gérée en utilisant le prop de rendu du composant et en passant une fonction qui renvoie une page 404. Cela permet aux développeurs de créer des pages 404 personnalisées avec le contenu de leur choix, comme des liens utiles ou un message d'excuse.

Comment gérer la page introuvable dans le routeur de réaction

Lorsque vous utilisez React Router, vous pouvez gérer une page introuvable en créant une route personnalisée qui affichera un composant NotFound lorsque l'URL ne correspond à aucune des routes existantes. Pour ce faire, vous devez créer une nouvelle route avec le chemin défini sur "*" et rendre votre composant NotFound.

Par exemple :

} />

Cela correspondra à toute URL qui ne correspond pas déjà à une route existante et affichera votre composant NotFound.

Comment forcer une page réactive à se recharger

Dans React Router, vous pouvez forcer le rechargement d'une page en utilisant la méthode replace sur l'objet historique. Cela remplacera l'entrée actuelle dans la pile d'historique par une nouvelle, forçant ainsi un rechargement de la page. Pour utiliser cette méthode, vous devez d'abord accéder à l'objet d'historique. Vous pouvez le faire en le passant comme accessoire lors de la création de votre composant de routeur :

const AppRouter = () => (

{/* Vos itinéraires ici */}

);

Une fois que vous avez accès à l'objet historique, vous pouvez utiliser sa méthode replace comme suit :

history.replace('/some-route');