Mengapa Saya Melihat Halaman Kosong dalam Apl React Saya?

Halaman Kosong dalam Reaksi: Membongkar Kesilapan

Apabila memulakan pembangunan React, seseorang mungkin menghadapi isu yang mengecewakan apabila menemui halaman kosong pada menavigasi ke aplikasi mereka. Mengenal pasti punca masalah pemaparan ini memerlukan pemeriksaan menyeluruh kod.

Dalam keadaan ini, aplikasi React yang disediakan menggunakan pakej "react-router-dom" untuk penghalaan antara halaman. Dengan memeriksa komponen Laluan dalam App.js, kami mendapati bahawa mereka menggunakan sintaks lapuk daripada versi pustaka yang lebih awal.

Dalam react-router-dom@6, pemaparan kandungan yang dihalakan telah beralih daripada menggunakan prop "komponen" kepada prop "elemen". Pengubahsuaian ini memerlukan menghantar komponen sebagai JSX dalam prop "elemen" dan bukannya merujuknya sebagai komponen.

Untuk membetulkan isu ini, ubah suai fail App.js untuk memasukkan sintaks ini:

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>
  );
}

Dengan membuat pelarasan ini, komponen dipaparkan dengan betul dalam struktur JSX, memastikan paparan halaman Rumah dan Dompet yang sesuai.

Atas ialah kandungan terperinci Mengapa Saya Melihat Halaman Kosong dalam Apl React Saya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!