I am using:
React, Redux, React-Router, Meteor
Following situation:
I have a modal with two tabs, based on the chosen tab a different list of selections will be shown in the content area, picking a selection will then give a list of subselection (all within the modal).
Desired behavior:
I want the user to be able to use the browser's back button to "undo" clicking on one of the tabs or picking a selection.
What I tried so far with no success:
use withRouter HOC to wrap my component, so that I would get access to history. I would then use history.push(currentUrl,{selectedTab:selection}) -> Problem: the state from push wasn't stored on this histories location object, but only in the state of the history object associated with my rootcomponent (way further up the tree)
(More promising so far) Simply import the history I created with createHistory in another module and put that into component state on construction. I would then access the push method by using
this.state.history.push(currentUrl,{selectedTab:selection}), which works fine and I can find the pushed state underthis.state.history.location.state.selectedTab. However, using the browser's back button does not cause a rerender and therefore the selection will stay the same.
Any ideas?
Cheers