reagiere mehrere Layouts (route roots) mit PlainRoutes

Question

Ich versuche, plainroutes zu verwenden, um ein react-router-Profil zu erstellen. Ich bin nicht davon überzeugt, dass PlainRoutes die lesbarste Art ist, Code zu schreiben, aber ich versuche es zu versuchen, da jeder davon begeistert zu sein scheint. Ich habe eine extrem frustrierende Zeit damit, mehrere Layouts für meine Komponenten zu definieren. Nehmen Sie die folgenden Arbeitscode:

Arbeits Beispiel

export const createRoutes = (store) => ({ 
    path  : '/', 
    component : CoreLayout, 
    childRoutes : [ 
    LoginView(store), 
    SignupView(store), 
    Activate(store), 
    ForgotPw(store), 
    ConfirmReset(store) 
    ] 
} 
) 

nichts Unerwartetes geschieht hier plainroutes. Die tatsächlichen Routen werden in den Ansichten gebaut, um die folgende Struktur (Loginview zum Beispiel) mit:

Verzeichnisstruktur von childRoute Objekte

-/Login 
--index.js 
--/components 
--Loginview.jsx 
--Loginview.scss 

Die index.js Dateien wenig Route Blöcke suchen, wie diese enthalten:

Beispiel childroute

export default (store) => ({ 
    path : 'activate', 
    component: ActivateView 
}) 

Ich werde auch die Quelle der Login Komponente unten, wie oben erwähnt, einschließen. Bitte beachten Sie, dass ich versucht habe, path: 'login' zu dieser Komponente hinzuzufügen, aber das machte keinen Unterschied.

Anmelden Import

export default { 
    component: LoginView 
} 

Wenn ein Nutzer besucht /login sie die Login-Komponente. Einfach richtig? Ja. Jetzt sehen Sie möglicherweise, dass alle diese Routen wie eine Gruppe von authentifizierungsbezogenen Ansichten aussehen. Ich möchte, dass diese Ansichten ein Layout teilen. In diesem Fall CoreLayout. Das funktioniert auch mit dem obigen Code.

Der nächste Schritt ist, dass ich ein Benutzerdashboard für die Anmeldung nach dem Benutzer hinzufügen möchte. Dieses Dashboard muss ein anderes Layout verwenden, das ich anrufe LoggedIn. Natürlich habe ich erwartet, dass ein weiteres JSON-Objekt mit einem ähnlichen Muster Zugabe dies erreichen könnte, so produzierte ich den Code unten:

Gebrochene mehrere Layout Versuch

export const createRoutes = (store) => ({ 
    path  : '/login', 
    component : CoreLayout, 
    indexRoute : Login, 
    childRoutes : [ 
    SignupView(store), 
    Activate(store), 
    ForgotPw(store), 
    ConfirmReset(store) 
    ] 
}, 
    { 
    path  : '/', 
    component : LoggedIn, 
    indexRoute : Home, 
    childRoutes : [ 
    ] 
    } 
) 

Der obige Code nicht wie vorgesehen. Der einzige Pfad, der funktioniert, sind die Pfade im zweiten Element des Sets (das mit der Route /). Ich habe versucht, einige Routen vom ersten Element nach unten zu verschieben und die funktionieren, wenn ich das zweite Element einfüge ... aber das löst offensichtlich nicht mein Problem.

Die frustrierendste Sache für mich ist, dass es mir scheint, als ob ich die SO-Posts befolge, die sich damit befassen, obwohl es ein wenig schwierig ist, sicher zu erzählen, weil sie keine plainroutes verwenden. Ich verbinde eine here als Referenz.

Answer 1

Das Ausgeben half mir tatsächlich, das Problem zu lösen. Nichts wie eine gute Gummiente. Es sieht so aus, als hätte ich die Art des Router-Objekts falsch verstanden. Anscheinend muss es ein legitimes Objekt sein, bei dem ich den Eindruck hatte, dass es eine Sammlung akzeptiert. Daher müssen Sie alles im Rahmen eines einzelnen Elternteils definieren.Siehe unten, wie ich es für mein spezielles Beispiel gelöst habe:

export const createRoutes = (store) => (
    { 
    path  : '/', 
    component : CoreLayout, 
    indexRoute : Home, 
    childRoutes : [ 
     { 
     path  : '/', 
     component : AuthLayout, 
     childRoutes : [ 
      LoginView(store), 
      SignupView(store), 
      Activate(store), 
      ForgotPw(store), 
      ConfirmReset(store) 
     ] 
     }, 
     { 
     path  : '/admin', 
     component : LoggedIn, 
     indexRoute : Home, 
     childRoutes : [ 
     ] 
     } 
    ] 
    } 

)