goBack button while preserving url state using react-router

Question

Just for the record, I am still using react-router 0.13.x. Ok, so this is what I am trying to do:

I have master view (grid) and a detail view. In the detail view there are two tabs (each tab is a route inside the item). Something like:

grid/
 item/
    tab/
    tab/

The grid can have a query in the url in this way: http://url.com/grid?sort=name

Inside the grid component we can change the sort and that will be reflected into the URL. What I want to implement is a back button inside the <Item/> component.

I tried with goBack() from react-router but I have two main problems:

If user clicks on a tab inside the <Item/> component, the goBack() function will go back to the previous tab, not to the <Grid/> (that is normal of course, but not what I want here).
If user refreshes the page while seeing the <Item/> component, clicking goBack will say:

Warning: goBack() was ignored because there is no router history

Next try, using getCurrentRoutes():

this.context.router.transitionTo(routes[routes.length-2].path);

The problem with this is that the user will lost its sort selection for the <Grid />. So if user change the sort to surname: http://url.com/grid?sort=surname, clicks into an item and use the back button, he will be back to the default route: http://url.com/grid?sort=name. This won't happen if user uses the native browser back button, even if the user refreshes the <Item/> page, clicking the native back button will bring the user to the <Grid/> with the correct sort query.

I guess what I am basically looking here is a goBack() that goes back to the parent route (<Grid/> in this case) ignoring internal routes from <Tab/> and then a way to preserve the url query while going back to the <Grid/>.

Any ideas on how to do achieve something better that I did here?

konoufo konoufo · Accepted Answer · 2016-07-07T15:13:35

You could just put the current query params (which can be accessed from this.props.location.query) in the Location object when transitioning to the next tab as in :

   // go to next tab
   this.context.router.push({
     pathname:'/tab2', 
     query: this.props.location.query})
   // go back
   this.context.router.push({
     pathname: routes[routes.length-2].path, // your grid path
     query: this.props.location.query})

Hope it helps.

goBack button while preserving url state using react-router

1 Answers