Bagaimana untuk Membetulkan Ralat \'[PrivateRoute] bukan komponen\' dalam React Router v6?

Ralat: [PrivateRoute] bukan komponen

Ralat ini berlaku apabila menggunakan React Router v6 dan cuba mencipta laluan peribadi. Kod yang diberikan dalam PrivateRoute.js cuba mengembalikan komponen Route, tetapi ia tidak dieksport seperti itu.

Penyelesaian:

Untuk menyelesaikan isu ini, ubah suai PrivateRoute Fail .js seperti berikut:

import React from 'react';
import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoute = () => {
    const auth = null; // determine if authorized, from context or however you're doing it

    // If authorized, return an outlet that will render child elements
    // If not, return element that will navigate to login page
    return auth ? <Outlet /> : <Navigate to="/login" />;
}

export default PrivateRoute;

Dalam fail App.js, pastikan laluan peribadi ditakrifkan seperti berikut:

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

Kod yang disemak ini akan memastikan komponen PrivateRoute diiktiraf sebagai komponen Laluan dan akan berfungsi dengan betul untuk penghalaan peribadi.

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