Warum wird in meiner React-App eine leere Seite angezeigt?

Leere Seite in React: Den Fehler aufdecken

Wenn man mit der React-Entwicklung beginnt, stößt man möglicherweise auf das frustrierende Problem, auf eine leere Seite zu stoßen Navigieren zu ihrer Anwendung. Um die Grundursache dieses Rendering-Problems zu identifizieren, ist eine gründliche Untersuchung des Codes erforderlich.

In diesem Fall verwendet die bereitgestellte React-Anwendung das Paket „react-router-dom“ für das Routing zwischen Seiten. Bei der Untersuchung der Route-Komponenten in App.js stellen wir fest, dass sie die veraltete Syntax einer früheren Version der Bibliothek verwenden.

In „react-router-dom@6“ hat sich die Darstellung von gerouteten Inhalten von „using“ verschoben die Requisite „Komponente“ zur Requisite „Element“. Diese Änderung erfordert die Übergabe von Komponenten als JSX innerhalb der „Element“-Requisite, anstatt sie als Komponenten zu referenzieren.

Um das Problem zu beheben, ändern Sie die App.js-Datei so, dass sie diese Syntax enthält:

import {BrowserRouter as Router,Routes,Route,} from "react-router-dom";
import { Home } from './components/Home';
import { Wallet } from './components/Wallet';

function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/wallet" element={<Wallet />} />
        </Routes>
      </Router>
  );
}

Durch diese Anpassung werden die Komponenten innerhalb der JSX-Struktur korrekt gerendert, wodurch die entsprechende Anzeige der Home- und Wallet-Seiten gewährleistet wird.

Das obige ist der detaillierte Inhalt vonWarum wird in meiner React-App eine leere Seite angezeigt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!