React Router: Vor-/Nachteile der Routenstruktur

Question

Dies ist mir in den Sinn gekommen. Ich habe mich gefragt, ob jemand irgendwelche Einsichten hatte.

Hier sind zwei Beispiele:

<Route path="/" component={Container}> 
    <Route path="user" component={Users}> 
     <Route path="user/:id" component={Profile} /> 
    </Route> 
</Route> 

Im obigen Beispiel meiner Benutzer Komponente würde die Profil Komponente durch props.children werden Rendering.

<Route path="/" component={Container}> 
    <Route path="user" component={Users} /> 
    <Route path="user/:id" component={Profile} /> 
</Route> 

würde dieses Beispiel im Wesentlichen als ersten gleich sein, außer ich die Benutzer Komponente in Profil importieren müsste.

Gibt es irgendwelche Vorteile/Nachteile für jeden Ansatz in Bezug auf Leistung und/oder Architektur?

Irgendwelche Gedanken würden geschätzt werden.

Answer 1

Dies ist sehr wahrscheinlich keine Ursache für Performance-Probleme, die beiden Optionen sind nur anders organisiert und werden sich anders verhalten. Es gibt keine bessere Wahl - nur eine Entscheidung, die für Ihre App am sinnvollsten ist.

Die wichtigste Sache zu beachten ist, dass children ist nur eine Stütze. Durch das Ändern von Requisiten wird die Komponente nicht deaktiviert. Die neue children bewirkt jedoch, dass die vorherige children deaktiviert wird.

In Ihrem ersten Beispiel, wenn Sie zu user/1 navigieren und dann navigieren später user/5 wird Profile Komponente einmal montiert hat, dann unmontiert, dann wieder montiert .. aber Users haben wird nur einmal montiert.

Wenn Sie das gleiche in Ihrem zweiten Beispiel tun, werden Users und Profile mount --- dann beide unmount und erneut mounten. Dies liegt daran, dass in diesem Szenario die sich ändernden children die von Container sind.

Ohne weitere Informationen über Ihre App scheint es, dass das erste Szenario wünschenswerter ist, weil weniger Komponenten mount/unmount .. vielleicht können Sie einige Zustand auf diese Weise beibehalten, aber es hängt wiederum davon ab, was Ihre App benötigt machen.