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!
