Warum rendert meine React-Router-Dom-Link-Komponente nach einer URL-Änderung nicht die richtige Komponente?

Link-Tag-Problem in React-Router-Dom

React-router-dom bietet eine Link-Komponente für die Navigation zwischen Seiten in einem einzigen Seitenanwendung. In bestimmten Fällen sind Benutzer jedoch auf ein Problem gestoßen, bei dem durch Klicken auf das Link-Tag die URL geändert wird, die entsprechende Komponente jedoch nicht gerendert wird.

Erklärung:

Das Problem Dies ist auf ein Kompatibilitätsproblem zwischen den Versionen von React-Router-Dom@5 und React@18 zurückzuführen. Insbesondere sind Versionen von React-Router-Dom vor 5.3.3 nicht vollständig mit React 18 kompatibel.

Lösungen:

Um dieses Problem zu beheben, ist einer der Folgende Lösungen können angewendet werden:

1. Aktualisieren Sie React-Router-Dom:

• Aktualisieren Sie auf React-Router-Dom Version 5.3.3 oder höher. Diese Version enthält einen Fix für dieses Kompatibilitätsproblem.

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

2. Zurück zu React 17:

• Downgrade auf React 17 oder Verwendung der React 17-Syntax in der Datei index.js.

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

import App from "./App";

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

3. Verschachtelter React.StrictMode:

• Verschieben Sie die React.StrictMode-Komponente als untergeordnetes Element der Router-Komponente.

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

4. Upgrade auf React-Router-Dom 6:

• Upgrade auf die neueste Version von React-Router-Dom (Version 6 oder höher) und passen Sie die Routensyntax entsprechend an.

Das obige ist der detaillierte Inhalt vonWarum rendert meine React-Router-Dom-Link-Komponente nach einer URL-Änderung nicht die richtige Komponente?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!