Wie behebt man den Fehler „PrivateRoute ist kein' in React Router v6?

React Router v6: Fehler mit der privaten Routenkomponente

Beim Definieren privater Routen in React Router v6 tritt ein Fehler auf. Die Fehlermeldung besagt, dass die PrivateRoute-Komponente keine -Komponente ist. oder Komponente. Dieses Problem tritt auf, wenn die privaten Routen falsch implementiert werden.

Lösung

Ersetzen Sie in PrivateRoute.js Ihren Code durch Folgendes:

<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>

Aktualisieren Sie in route.js Ihren Code wie folgt:

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

Erläuterung

Die PrivateRoute-Komponente verwendet jetzt das Komponente, die es ermöglicht, die untergeordneten Elemente der Route bei entsprechender Autorisierung zu rendern. Die Schaltfläche Die Komponente wird verwendet, um den Benutzer auf eine bestimmte Seite umzuleiten, wenn er nicht authentifiziert ist.

Stellen Sie in App.js sicher, dass Sie Ihre Routen in eine Komponente und verwenden Sie das Element prop, um die private Route anzugeben.

Zusätzliche Hinweise

• Die Variable isAuthenticated sollte durch Ihre eigene Authentifizierungslogik ersetzt werden.
• Der Pfad, zu dem nicht authentifizierte Benutzer umgeleitet werden, kann nach Bedarf angepasst werden.
• Wenn Sie über mehrere private Routen verfügen, können Sie den useAuth-Kontext-Hook verwenden, um den Authentifizierungsstatus in der gesamten Anwendung zu teilen.

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