Mengapa Saya Mendapat Ralat \"[PrivateRoute] is Not a Component\" dalam React Router v6?

Ralat React Router v6: [PrivateRoute] bukan Komponen

Apabila menggunakan React Router v6 dan mencipta laluan peribadi, pembangun mungkin menghadapi ralat yang menyatakan, "[PrivateRoute] bukan komponen . Semua anak komponen mestilah a atau ."

Asal Masalah

Ralat ini timbul apabila komponen "PrivateRoute" tidak diberikan dengan betul sebagai anak kepada "" komponen dalam "" komponen.

Penyelesaian

Untuk menyelesaikan isu ini, pastikan komponen PrivateRoute ditakrifkan sebagai anak bersarang komponen Route dalam komponen Routes, seperti yang dilihat di bawah:

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

const PrivateRoute = () => {
  const auth = null; // Determine if authorized

  // Return outlet if authorized, navigate to login otherwise
  return auth ? <Outlet /> : <Navigate to="/login" />;
};

// App.js
import React, { Fragment } from "react";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Navbar from "./components/layout/Navbar";
import Home from "./components/pages/Home";
import Register from "./components/auth/Register";
import Login from "./components/auth/Login";
import PrivateRoute from "./components/routing/PrivateRoute";

const App = () => {
  return (
    <Router>
      <Fragment>
        <Navbar />
        <Routes>
          <Route exact path="/" element={<PrivateRoute />}>
            <Route exact path="/" element={<Home />} />
          </Route>
          <Route exact path="/register" element={<Register />} />
          <Route exact path="/login" element={<Login />} />
        </Routes>
      </Fragment>
    </Router>
  );
};</code>

Dalam kod yang disemak ini:

• PrivateRoute bersarang dalam Route, yang seterusnya bersarang dalam Routes.
• Komponen PrivateRoute menentukan kebenaran dan memaparkan komponen Outlet (elemen anak) jika dibenarkan.
• Jika tidak dibenarkan, PrivateRoute menavigasi ke halaman log masuk.

Atas ialah kandungan terperinci Mengapa Saya Mendapat Ralat \"[PrivateRoute] is Not a Component\" dalam React Router v6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!