2016-06-04 2 views
0

Derzeit habe ich ein Beispiel, an dem ich arbeite, die eine grundlegende Master-Detailseite ist. In diesem Beispiel wird react-router-redux verwendet. Im Detailbereich habe ich eine Reihe von Tabs, die verschiedene Facetten des ausgewählten Elements anzeigen können ... alles ziemlich normale Sachen.Speichern der ausgewählten Registerkarte für die Wiederherstellung mit React Redux und Router

Wenn der Benutzer ein Element aus der Master-Liste auswählt, ist die URL, auf die die angeklickte <Link ... /> sendet, etwa customer/123. Innerhalb der Route, die für diese URL registriert ist (d. H. :id), habe ich eine indexRoute Route, die replaces s die Route zu Standardroute/Registerkarte /customer/${nextState.params.id}/address.

All dies funktioniert gut und der Benutzer kann einfach zwischen Tabs navigieren. Das Problem tritt auf, wenn der Benutzer das Detailfenster schließt und ein anderes Detail auswählt. Wie erwartet, öffnet es die Registerkarte basierend auf der Route, die von indexRoute angegeben wird. Unter normalen Umständen könnte das in Ordnung sein, aber ich möchte, dass es sich erinnert, welche Route ausgewählt wurde. Ich frage mich, ob jemand Ideen hat, wie das gemacht werden soll?

Ich glaube, ich kann dies tun erreichen, indem er einen Rückruf mit dem onClick Ereignisse der Link Registrierung und ein Ereignis ausgelöst wird, welches in key der ausgewählten Registerkarte führt in den store gespeichert werden. Dann kann ich innerhalb der onEnter der indexRoute auf den Speicher zugreifen und diesen gespeicherten Zustand herausziehen und das replace auf dieses Element richten.

Dies sollte funktionieren, aber scheint wie eine Menge, nur zu fragen, ob dies für andere richtig scheint?

Antwort

0

Ich würde den gleichen Ansatz verwenden - eine Aktion versenden, wenn auf die Registerkarte geklickt wird und die Tabulatortaste im Geschäft speichern. Verwenden Sie mapStateToProps, um den Wert abzurufen.

Verwandte Themen