Wie behebt man den Fehler „[PrivateRoute] ist keine Komponente' in React Router v6?

Fehler: [PrivateRoute] ist keine Komponente

Dieser Fehler tritt auf, wenn React Router v6 verwendet wird und versucht wird, private Routen zu erstellen. Der angegebene Code in PrivateRoute.js versucht, eine Routenkomponente zurückzugeben, wird jedoch nicht als solche exportiert.

Lösung:

Um dieses Problem zu beheben, ändern Sie die PrivateRoute .js-Datei wie folgt:

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;

Stellen Sie in der App.js-Datei sicher, dass die private Route wie folgt definiert ist:

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

Dieser überarbeitete Code stellt sicher, dass die PrivateRoute-Komponente wird als Routenkomponente erkannt und funktioniert ordnungsgemäß für privates Routing.

Das obige ist der detaillierte Inhalt vonWie behebt man den Fehler „[PrivateRoute] ist keine Komponente' in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!