Bagaimana untuk Membetulkan \'Ralat: [PrivateRoute] bukan komponen. Semua anak komponen mestilah a atau \' dalam React Router v6?

Ralat: [PrivateRoute] bukan komponen. Semua anak komponen mestilah atau

Dalam React Router v6, anda mungkin menghadapi ralat yang menyatakan bahawa komponen laluan peribadi bukan komponen Laluan yang sah. Ini berlaku apabila komponen laluan peribadi anda tidak ditakrifkan atau dikonfigurasikan dengan betul.

Untuk menyelesaikan isu ini, ikut langkah berikut:

Komponen Laluan Persendirian

Pastikan komponen Laluan Peribadi anda ialah komponen Laluan Reaksi yang sah. Dalam contoh anda, anda mempunyai ralat sintaks dalam komponen PrivateRoute:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

Anda harus menggantikan / selepas ke="/Home" dengan kurungan sudut penutupan dua kali:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

Konfigurasi Laluan

Dalam konfigurasi laluan anda, pastikan laluan peribadi ditakrifkan dengan betul. Dalam contoh anda, anda mempunyai:

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

Ini tidak akan berfungsi kerana anda tiada kurungan sudut penutup dalam prop elemen. Kod yang betul ialah:

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

Sebagai alternatif, anda boleh menggunakan kaedah lain untuk menyediakan laluan peribadi anda, seperti menggunakan pendekatan pemaparan bersyarat:

<Route exact path='/' element={<PrivateRoute/>}>
  <Route exact path='/' element={<Dashboard/>}/>
</Route>

Dalam contoh ini, komponen PrivateRoute akan menentukan sama ada untuk memaparkan komponen papan pemuka berdasarkan status pengesahan.

Kesimpulan

Dengan memastikan komponen PrivateRoute anda ditakrifkan dengan betul dan konfigurasi laluan anda betul, anda boleh menyelesaikannya ralat Ralat: [PrivateRoute] bukan komponen. Semua anak komponen mestilah atau .

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan \'Ralat: [PrivateRoute] bukan komponen. Semua anak komponen mestilah a atau \' dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!