Ergänzung, um Codezeilen zu reduzieren, lesbarer und schöner zu machen.
Dies könnte nur ein Kommentar sein, aber ich habe nicht genug Punkte, also werde ich es als Antwort setzen.
Dallins Antwort funktioniert, aber Drews Antwort ist besser! Und nur um Drews Antwort zur Ästhetik zu vervollständigen, empfehle ich, eine private Komponente zu erstellen, die Komponenten als Requisiten anstelle von Kindern verwendet.
Sehr einfaches Beispiel einer Datei/Komponente für private Routen:
Bei mir hat es funktioniert, ich musste nur umsteigen const Private = (Component) => ZU konst Private = ({Component}) =>
– Daniel Miranda
27. Januar um 2:36
Dallins Antwort ist nett, aber um ehrlich zu sein, sparen Sie nicht viel, wenn Sie nur die Zielkomponente mit einer Authentifizierungskomponente umhüllen. Wenn überhaupt, ist es eine komplexere Lösung, da es jetzt um das Rendern geht zweiRoute Komponenten und ein Outlet nur um einen einzelnen Pfad zu rendern.
– Zeichnete Reese
7. November 2021 um 6:49 Uhr
Danke das war meine Lösung und hat funktioniert.
– Weil ich mich selbst hasse
7. November 2021 um 13:44 Uhr
@DrewReese, ich denke, der Vorteil von Dallins Antwort kommt zum Tragen, wenn Sie viele Routen haben, die geschützt werden müssen. Also mit nur einer geschützten Route macht es nicht wirklich Sinn, aber was ist mit 5 oder 20? Es beginnt zu sparen, da kein Haufen redundanter Wrapper-Komponenten erforderlich ist.
– Mikey T
6. Januar um 7:38
@MikeyT Stimme voll und ganz zu, siehe Kommentare unter seiner Antwort. Meins wurde ursprünglich im Wesentlichen direkt aus den offiziellen Dokumenten entnommen, um eine einzelne Komponente zu schützen. Wenn ich diese Art von Fragen anspreche, decke ich jetzt normalerweise beide Anwendungsfälle ab.
– Zeichnete Reese
6. Januar um 16:17 Uhr
Ich habe alle Antworten ausprobiert, aber es wird immer der Fehler angezeigt:
Fehler: [PrivateRoute] ist kein Bauteil. Alle untergeordneten Komponenten von müssen ein oder sein
Aber ich habe eine Lösung gefunden )))
In der PrivateRoute.js-Datei:
import React from "react"; import { Navigate } from "react-router-dom";
import {isauth} from 'auth'
const PrivateRoute= ({ children }) => {
const authed = isauth()
return authed ? children : <Navigate to={"/Home" /> };
export default ProtectedRoute;
Ich weiß, dass dies nicht genau das Rezept ist, wie man es macht PirvateRoute funktioniert, wollte aber nur erwähnen, dass neue Dokumente einen etwas anderen Ansatz empfehlen, um dieses Muster mit React-Router v6 zu handhaben: