Mengapa Apl Reaksi Saya Menunjukkan Halaman Kosong?

Halaman Kosong dalam React: Panduan Penyelesaian Masalah

Apabila bekerja dengan React, menghadapi halaman kosong boleh mengecewakan. Isu ini sering timbul kerana salah faham tentang cara penghalaan berfungsi dalam React-router-dom. Mari kita selami kes tertentu dan berikan penyelesaian terperinci untuk menyelesaikan isu halaman kosong.

Pernyataan Masalah:

Pertimbangkan aplikasi React berikut:

<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>

Apabila menavigasi ke http://localhost:3001/ atau http://localhost:3001/wallet, halaman tersebut kekal kosong.

Penyelesaian:

Dalam versi terbaru react-router-dom, prop komponen Route telah digantikan dengan prop elemen. Elemen prop mengambil elemen React sebagai nilainya, yang bermaksud bahawa komponen harus dihantar sebagai elemen JSX dan bukannya rujukan kepada komponen.

Untuk menyelesaikan isu tersebut, ubah suai fail App.js seperti berikut:

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

Dengan membuat perubahan ini, komponen (Home dan Wallet) kini dihantar sebagai elemen React kepada prop elemen dan aplikasi kini seharusnya memaparkan halaman yang dijangkakan.

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