Mengapakah aplikasi React saya menunjukkan halaman kosong, dan bagaimana saya membetulkannya?

Halaman Kosong dalam Aplikasi React: Selesai

Apabila menemui halaman kosong semasa membangunkan aplikasi React, penting untuk menyiasat isu tersebut dengan segera. Seperti yang anda nyatakan dalam pertanyaan anda, halaman anda tidak memaparkan apa-apa terutamanya disebabkan oleh masalah pemaparan komponen.

Punca utama terletak pada versi react-router-dom yang anda gunakan. Dalam react-router-dom@6, komponen Route telah mengalami perubahan. Komponen, render dan prop fungsi kanak-kanak tidak lagi disokong. Sebaliknya, kandungan yang dihalakan dipaparkan pada prop elemen sebagai ReactNode, pada asasnya sebagai JSX.

Untuk menyelesaikan masalah ini, anda perlu mengemas kini komponen Laluan anda untuk mematuhi sintaks baharu. Berikut ialah contoh rupa kod anda yang dikemas kini:

<router>
  <routes>
    <route path="/" element="{<Home"></route>} />
    <route path="/wallet" element="{<Wallet"></route>} />
  </routes>
</router>

Dalam kod yang diubah suai ini, anda telah mengalihkan komponen Home dan Wallet ke dalam prop elemen dan menyerahkannya sebagai JSX dan bukannya rujukan komponen. Ini kini sepatutnya memaparkan halaman masing-masing dalam aplikasi anda dengan betul.

Atas ialah kandungan terperinci Mengapakah aplikasi React saya menunjukkan halaman kosong, dan bagaimana saya membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!