Bagaimana untuk Membetulkan \'PrivateRoute is Not a \' Ralat dalam React Router v6?

React Router v6: Ralat dengan Komponen Laluan Peribadi

Anda menghadapi ralat semasa mentakrifkan laluan peribadi dalam React Router v6. Mesej ralat menyatakan bahawa komponen PrivateRoute bukan atau komponen. Isu ini timbul apabila laluan peribadi dilaksanakan secara tidak betul.

Penyelesaian

Dalam PrivateRoute.js, gantikan kod anda dengan yang berikut:

<code class="javascript">import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
  const isAuthenticated = false; // Replace with your authentication logic

  return isAuthenticated ? <Outlet /> : <Navigate to="/home" />;
};

export default PrivateRoute;</code>

Dalam route.js, kemas kini kod anda seperti berikut:

<code class="javascript">...
<PrivateRoute exact path="/">
  <Route exact path="/" element={<Dashboard />} />
</PrivateRoute>
<Route exact path="/home" element={<Home />} /></code>

Penjelasan

Komponen PrivateRoute kini menggunakan komponen, yang membolehkan kanak-kanak laluan diberikan apabila dibenarkan. Alat komponen digunakan untuk mengubah hala pengguna ke halaman tertentu jika mereka tidak disahkan.

Dalam App.js, pastikan anda membungkus laluan anda dalam komponen dan gunakan prop elemen untuk menentukan laluan peribadi.

Nota Tambahan

• Pembolehubah isAuthenticated hendaklah digantikan dengan logik pengesahan anda sendiri.
• Laluan ke mana pengguna tidak disahkan diubah hala boleh disesuaikan mengikut keperluan.
• Jika anda mempunyai berbilang laluan peribadi, anda boleh menggunakan cangkuk konteks useAuth untuk berkongsi keadaan pengesahan merentas aplikasi.

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan \'PrivateRoute is Not a \' Ralat dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!