Pourquoi mon composant de lien React-Router-Dom ne restitue-t-il pas le composant correct après une modification d'URL ?

Problème de balise de lien dans React-Router-Dom

React-router-dom fournit un composant Link pour la navigation entre les pages dans un seul demande de page. Cependant, dans certains cas, les utilisateurs ont rencontré un problème où cliquer sur la balise Lien modifie l'URL mais ne parvient pas à afficher le composant correspondant.

Explication :

Le problème provient d'un problème de compatibilité entre les versions de réagir-router-dom@5 et React@18. Plus précisément, les versions antérieures à 5.3.3 de React-Router-dom ne sont pas entièrement compatibles avec React 18.

Solutions :

Pour résoudre ce problème, l'un des les solutions suivantes peuvent être appliquées :

1. Mettre à jour React-Router-Dom :

• Mise à jour vers React-Router-Dom version 5.3.3 ou supérieure. Cette version contient un correctif pour ce problème de compatibilité.

npm uninstall -S react-router-dom
npm install -S react-router-dom@5.3.3

2. Revenir à React 17 :

• Rétrograder vers React 17 ou utiliser la syntaxe React 17 dans le fichier index.js.

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  document.getElementById(&quot;root&quot;)
);

3. React.StrictMode imbriqué :

• Déplacez le composant React.StrictMode pour qu'il soit un enfant du composant routeur.

<BrowserRouter>
  <React.StrictMode>
    ...
  </React.StrictMode>
</BrowserRouter>

4. Mise à niveau vers React-Router-Dom 6 :

• Mettez à niveau vers la dernière version de React-Router-Dom (version 6 ou supérieure) et ajustez la syntaxe de la route en conséquence.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!