Fehler: [PrivateRoute] ist kein Komponente. Alle untergeordneten Komponenten von muss ein sein oder

Lesezeit: 4 Minuten

Benutzer-Avatar
Weil ich mich selbst hasse

Ich verwende React Router v6 und erstelle private Routen für meine Anwendung.

Im Ordner PrivateRoute.jsich habe den Code

import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth}  from 'auth'

function PrivateRoute({ element, path }) {
  const authed = isauth() // isauth() returns true or false based on localStorage
  const ele = authed === true ? element : <Navigate to="/Home"  />;
  return <Route path={path} element={ele} />;
}

export default PrivateRoute

Und in Datei route.js Ich habe geschrieben als:

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

Ich habe das gleiche Beispiel durchgegangen React-router Auth Beispiel – StackBlitz, Datei App.tsx

Gibt es etwas, das ich vermisse?

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:

import { Navigate } from 'react-router-dom';

const Private = (Component) => {
    const auth = false; //your logic

    return auth ? <Component /> : <Navigate to="/login" />
}

Beispiel für eine Routendatei:

<Routes>
    <Route path="/home" element={<Home />} />
    <Route path="/user" element={<Private Component={User} />} />
</Routes>

  • 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 zwei Route 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;

In der route.js-Datei:

<Route
  path="/"
  element={
      <ProtectedRoute >
        <Dashboard/>
      </ProtectedRoute>
    }
/>
<Route exact path="/home" element={<Home/>}/>

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:

    <Route path="/protected" element={<RequireAuth><ProtectedPage /></RequireAuth>} />
import { Navigate, useLocation } from "react-router";

export const RequireAuth: React.FC<{ children: JSX.Element }> = ({ children }) => {
  let auth = useAuth();
  let location = useLocation();

  if (!auth.user) {
    return <Navigate to="/login" state={{ from: location }} />;
  }

  return children;
};

und Sie sollten weitere Routen hinzufügen ProtectedPage selbst, wenn Sie es brauchen.

Sehen Dokumente und Beispiel für mehr Details. Überprüfen Sie auch diese Notiz von Michael Jackson, der auf einige Implementierungsdetails eingeht.

Benutzer-Avatar
cansu

Stellen Sie einfach Ihre Router-Komponente auf element prop ein:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/dashboard" element={<Dashboard />} />
</Routes>

Sie können auch nach einem Upgrade von v5 suchen,
https://reactrouter.com/docs/en/v6/upgrading/v5

  • Es beantwortet nicht die Frage, was ist mit der Authentifizierung?

    – Xaver Lambros

    27. Januar um 21:30 Uhr

1010270cookie-checkFehler: [PrivateRoute] ist kein Komponente. Alle untergeordneten Komponenten von muss ein sein oder

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy