Mengapa aplikasi React saya memaparkan halaman kosong selepas menaik taraf kepada React Router v6?

Selesaikan Masalah Halaman Kosong dalam Aplikasi React

Apabila membangunkan aplikasi React, isu sekali-sekala mungkin timbul apabila halaman kekal kosong, membuatkan pengguna bingung. Artikel ini akan menyelidiki salah satu punca paling biasa bagi masalah ini dan menyediakan penyelesaian.

Pertimbangkan coretan kod berikut:

<code class="jsx">// App.js
import { Route } from "react-router-dom";
...
<Route exact path="/" component={Home} />
<Route path="/wallet" component={Wallet} /></code>

Seperti yang anda perhatikan, anda menggunakan komponen prop untuk memberikan komponen React masing-masing dalam definisi Laluan. Walau bagaimanapun, dalam React Router v6, ini telah berubah dengan ketara.

Dalam React Router v6, komponen Route menjangkakan kandungan yang diberikan akan dihantar sebagai elemen anak menggunakan prop elemen dan bukannya prop komponen. Perbezaan yang ketara ini boleh menyebabkan halaman kekal kosong.

Untuk menyelesaikan masalah ini, anda perlu mengemas kini kod anda seperti berikut:

<code class="jsx">// App.js
import { Route } from "react-router-dom";
...
<Route exact path="/" element={<Home />} />
<Route path="/wallet" element={<Wallet />} /></code>

Dengan menggunakan prop elemen, anda menghantar React komponen sebagai anak kepada komponen Route, iaitu pendekatan yang betul dalam React Router v6.

Sebaik sahaja anda membuat perubahan ini, aplikasi React anda harus memaparkan kandungan yang betul pada laluan yang ditetapkan, menghapuskan isu halaman kosong yang mengecewakan. Perlu diingat, jika anda menghadapi masalah yang sama pada masa hadapan, semak semula versi React Router yang anda gunakan dan melaraskan kod anda dengan sewajarnya harus menjadi penyelesaian pantas.

Atas ialah kandungan terperinci Mengapa aplikasi React saya memaparkan halaman kosong selepas menaik taraf kepada React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!