Warum zeigt meine React-App eine leere Seite an?

Leere Seite in React: Ein Leitfaden zur Fehlerbehebung

Bei der Arbeit mit React kann es frustrierend sein, auf eine leere Seite zu stoßen. Dieses Problem entsteht häufig aufgrund eines Missverständnisses darüber, wie Routing in React-router-dom funktioniert. Lassen Sie uns einen konkreten Fall untersuchen und eine detaillierte Lösung zur Lösung des Problems mit leeren Seiten bereitstellen.

Problemstellung:

Betrachten Sie die folgende React-Anwendung:

<code class="javascript">// App.js
function App() {
  return (
      <Router>
        <Routes>
          <Route path="/" component={Home} />
          <Route path="/wallet" component={Wallet} />
        </Routes>
      </Router>
  );
}</code>

<code class="javascript">// Wallet.js
export function Wallet() {
  return (
    <div>
      <h1>Wallet Page!</h1>
    </div>
  );
}</code>

<code class="javascript">// Home.js
export function Home() {
  return (
    <div>
      <h1>Home Page!</h1>
    </div>
  );
}</code>

Beim Navigieren zu http://localhost:3001/ oder http://localhost:3001/wallet bleibt die Seite leer.

Lösung:

In neueren Versionen von React-Router-Dom wurde die Komponentenstütze von Route durch die Elementstütze ersetzt. Die Element-Requisite nimmt ein React-Element als Wert an, was bedeutet, dass die Komponenten als JSX-Elemente statt als Referenzen auf Komponenten übergeben werden sollten.

Um das Problem zu beheben, ändern Sie die App.js-Datei wie folgt:

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

Durch diese Änderung werden die Komponenten (Home und Wallet) nun als React-Elemente an die Element-Requisite übergeben und die Anwendung sollte nun die erwarteten Seiten rendern.

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