React und Material-UI: Strukturieren von Anwendungen mit mehreren Seiten

Question

Ich benutze Meteor, React und Material-UI, um eine App zu erstellen. Um es einfach zu halten, nehmen wir an, dass die App zwei Seiten hat: Home und User.

Beide Seiten sollten das gleiche Layout haben: eine AppBar mit einem Hamburgermenü auf der linken Seite und ein IconMenu auf der rechten Seite. Wenn das Hamburger-Menü ausgewählt ist, wird eine Schublade von links heraus geschoben, und wenn das rechte Menü ausgewählt ist, erscheint ein Dropdown-Menü.

Für meine Zwecke ist das Menü der Schublade statisch, d. H. Die Menüeinträge ändern sich nicht, je nachdem, welche Seite (Startseite oder Benutzer) angezeigt wird. Das Dropdown-Menü auf der rechten Seite ändert sich jedoch je nachdem, welche Seite aktiv ist, d. H. Es ist kontextsensitiv.

Meine Frage ist: Welche Möglichkeiten habe ich, um dies zu bauen?

Ich denke, eine Option besteht darin, zwei Seitenkomponenten zu erstellen, z. HomePage und UserPage und komponieren jeweils unter Verwendung von z.B. MyAppBar und MyDrawer sowie der Inhalt, den die bestimmte Seite enthalten soll. Jede Seite wäre dann dafür zuständig, die Menüelemente im Dropdown-Menü zu erstellen und sie an MyAppBar weiterzuleiten. Anschließend wird die gesamte Seite gerendert.

Ich glaube, das würde das Problem lösen, aber ich bin mir nicht sicher, ob es einen besseren Weg gibt. Gibt es zum Beispiel einen zweiten Ansatz, bei dem ich nur die Inhaltskomponente der Seite aktualisieren und die Eignerkomponente (z. B. eine ApplicationPage-Komponente) die Inhaltskomponente (z. B. HomeContent oder UserContent) für die Einträge des Dropdown-Menüs abfragen kann Stellen Sie das Dropdown-Menü ein, wenn sich eine Inhaltskomponente ändert? Irgendwelche anderen Wahlen?

Ich benutze React Router, um Routing für/home und/user so tun, die oben genannten müssen auch dazu passen.

Answer 1

Ich benutze react Router für diesen Zweck.

<Router history={browserHistory}> 
    <Route component={App}> 
     <Route path='/login/' components={{main: Login}} /> 
     <Route path='/confirm' 
       components={{ 
           main: Confirm, 
           sidebar:Sidebar 
          }} 
      /> 
    </Route> 
    </Router> 

In der Vorlage App können wir dann als Variablen verwenden this.props.main und this.props.sidebar.

Bitte schauen Sie sich https://github.com/reactjs/react-router/blob/master/examples/sidebar/app.js Formular mehr Details.