React Router - Wie erreiche ich Tab-ähnliche Navigation?

8

Ich bin neu in React und entwickle meine erste Anwendung mit React. Meine Anwendung hatte eine Tab-Komponente mit 4 Tabs, und der Inhalt jedes Tabs wurde als separate Komponente eingerichtet. Jetzt ersetze ich die Registerkarte mit 4 verschiedenen Routen. Also habe ich die Registerkarte los und benutze react-router, um 4 Routen einzurichten, eine für jede der 4 Komponenten.

Bei Tabs würde der Inhalt einer Registerkarte ihren Status beibehalten, wenn zu einer anderen Registerkarte navigiert und zurückgekehrt wird. Angenommen, die Registerkarte enthält eine Liste und der Benutzer hat zum Ende der Liste gescrollt. Wenn der Benutzer zu einer anderen Registerkarte navigiert und zurückkommt, wird die Liste nach unten gescrollt. Dies ist das gewünschte Verhalten für meine Anwendung.

Allerdings kann ich dieses Verhalten mit Routen nicht erreichen. Mir ist aufgefallen, dass bei der Navigation von einer Route zur anderen die Komponenten neu instanziiert (nicht nur neu gerendert) werden. Ich kann das sagen, weil der Konstruktor der Komponente jedes Mal aufgerufen wird, wenn die Route für die Komponente aktiv wird.

Ich möchte das Tab-ähnliche Verhalten erreichen. Ich weiß, dass es für Angular eine UI-Router-Extras-Bibliothek gibt, die Deep State Redirect (für Tab-ähnliche Navigation) bietet. Es funktioniert wirklich gut in meinem Angular-Projekt. Aber ich kann keine ähnliche Option für React finden. Ich habe react-router und react-router-component ausprobiert und beide Komponenten erneut instanziiert, wenn ihre Route aktiv wird.

Gibt es eine Lösung, um tabulatorisches Verhalten für die Routen in React zu erreichen?

    
DFB 21.05.2016, 11:34
quelle

2 Antworten

0

Persönlich habe ich entschieden, in diesem Fall react-router abzulegen und eine übergeordnete Komponente mit einem Status zu erstellen, der die aktuelle Registerkarte enthält, die angezeigt wird, während nur die aktive angezeigt wird.

Hier ist ein sehr einfaches Beispiel

%Vor%     
Elie Zgala 13.12.2016 16:05
quelle
0

Sie haben zwei Optionen, verwenden Redux oder zeigen / verbergen Komponenten basierend auf Tabs.

Hier ein Beispiel zum Ein- / Ausblenden von Komponenten

%Vor%     
Gavin Thomas 17.12.2017 06:20
quelle