Heim >Web-Frontend >js-Tutorial >Warum rendert meine React-Router-Dom-Link-Komponente nach einer URL-Änderung nicht die richtige Komponente?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-22 04:13:13266Durchsuche

Why Doesn't My React-Router-Dom Link Component Render the Correct Component After a URL Change?

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(&quot;root&quot;)
);

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn