Wie behebt man den „Fehler: [PrivateRoute] ist keine Komponente. Alle untergeordneten Komponenten von müssen ein oder sein“ in React Router v6?

Fehler: [PrivateRoute] ist keine Komponente. Alle untergeordneten Komponenten von muss eine oder

In React Router v6 kann es zu einer Fehlermeldung kommen, die besagt, dass eine private Routenkomponente keine gültige Routenkomponente ist. Dies tritt auf, wenn Ihre private Route-Komponente nicht ordnungsgemäß definiert oder konfiguriert ist.

Um dieses Problem zu beheben, führen Sie die folgenden Schritte aus:

PrivateRoute-Komponente

Stellen Sie sicher, dass Ihre PrivateRoute-Komponente eine ist gültige React Route-Komponente. In Ihrem Beispiel liegt ein Syntaxfehler in der PrivateRoute-Komponente vor:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot;  />;

Sie sollten das / danach durch ="/Home" ersetzen. mit einer doppelten schließenden spitzen Klammer:

const ele = authed === true ? element : <Navigate to=&quot;/Home&quot; ></Navigate>;

Routenkonfiguration

Stellen Sie in Ihrer Routenkonfiguration sicher, dass die private Route richtig definiert ist. In Ihrem Beispiel haben Sie:

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard/>}/>

Dies wird nicht funktionieren, weil in der Elementstütze eine schließende spitze Klammer fehlt. Der richtige Code lautet:

<PrivateRoute exact path=&quot;/&quot; element={<Dashboard />} />

Alternativ können Sie eine andere Methode zum Einrichten Ihrer privaten Route verwenden, z. B. einen bedingten Rendering-Ansatz:

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

In diesem Beispiel: Die PrivateRoute-Komponente bestimmt anhand des Authentifizierungsstatus, ob die Dashboard-Komponente gerendert werden soll.

Fazit

Indem Sie sicherstellen, dass Ihre PrivateRoute-Komponente ordnungsgemäß definiert ist und Ihre Routenkonfiguration korrekt ist, können Sie das Problem lösen der Fehler Fehler: [PrivateRoute] ist keine Komponente. Alle untergeordneten Komponenten von muss eine oder .

Das obige ist der detaillierte Inhalt vonWie behebt man den „Fehler: [PrivateRoute] ist keine Komponente. Alle untergeordneten Komponenten von müssen ein oder sein“ in React Router v6?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!