History: top() to get the previous route

Created on 7 Feb 2017  路  16Comments  路  Source: ReactTraining/history

There are use cases (see for example the gmail app on android), where the navigation appearance depends from where you are coming from.
Considering back button and other behaviors, it would be great to have a .top() that returns the route where you go when you click the back button.

Most helpful comment

canGo can solve an edge case if the user gets on the site directly but it does not fix routes inside the product that need to show different navigations BASED ON WHERE YOU ARE COMING FROM.

Think for example if instead of a "<-" you want to have a label "back to messages" or "back to the homepage"... you cannot do that with canGo.

The full solution consist in being able to inspect the top of the stack (where you are coming from). The back URL are a stack and it is pretty common for a stack to have a top() method.

Currently as a workaround, I have to push extra info in the state as I move to a new route (ex: {from: "messages"}. This is not ideal though.

All 16 comments

This is more of a routing issue than a history issue, but you should be able to just use goBack to mimic Android's back button, like we do in react-router-native's <AndroidBackButton> component. I've been meaning to dig in further and create a more comprehensive demo, but haven't had time yet. Please try it out and let us know how it goes.

@mjackson: I do not want to trigger a "go back", I want to be able to access what is in the state of the previous route from a stack prospective.

That would enable us to render a " <-" in the navigation bar when the user is coming from a specific route or a default navigation when the user is coming from other routes.

We currently render back/forward buttons on our website using memory history's canGo method. It sounds like that would solve your use case.

canGo can solve an edge case if the user gets on the site directly but it does not fix routes inside the product that need to show different navigations BASED ON WHERE YOU ARE COMING FROM.

Think for example if instead of a "<-" you want to have a label "back to messages" or "back to the homepage"... you cannot do that with canGo.

The full solution consist in being able to inspect the top of the stack (where you are coming from). The back URL are a stack and it is pretty common for a stack to have a top() method.

Currently as a workaround, I have to push extra info in the state as I move to a new route (ex: {from: "messages"}. This is not ideal though.

Since you're using memory history, just inspect history.entries. That's a list of all the entries in the stack. Be aware though that this will break on browser/hash history where we don't have the ability to see where we came from.

Any news on this? Indeed being able to access previous route would be nice.

My use case: this would make trivial redirecting a user once logged on the page he came from

protected page => auth => protected page again

You can already do this. There is nothing for us to add.

@mjackson what do you mean? where can I find the previous route with History without keeping track of it myself?

Inspect history.entries and history.index. It's all there. history.entries[history.index - 1] is the last location.

@mjackson thanks for helping! Maybe this is something related react-router-redux? Honestly docs and discussion around the web are very fragmented and I can't understand if this is related to history or react-router-redux module :(

import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

export const history = syncHistoryWithStore(browserHistory, store);
console.log(history); //no entries property!

@mjackson Can you please explain where entries is coming from? The browser'sHistory object doesn't have that method? I to need a way to get the path/route/location from which the user came from. I'm using React Router, not using Redux.

@Dmitry1007 history.entries is only available when using memory history, not browser history.

@mjackson can you please show us what is the proper way to get the previous route when using browser history then?

@damianobarbati You can't. Browsers won't let you because it's a security issue. Just imagine if a website could read all the URLs that you had visited previous to coming to that site. It would be a violation of that user's privacy.

@mjackson oh no I totally agree, but I didn't mean that! I meant how to read the same domain/website previous url without having to keep track of it xD

Imagine this scenario:

  • user gets on protected url
  • user is automatically redirected to login box (router logic)
  • user is automatically redirected to protected url (here comes history to play!)

I meant how to read the same domain/website previous url without having to keep track of it

We don't provide API for that in browsers because we don't have a reliable way to persist the data across page refreshes. You'll have to do it yourself.

Was this page helpful?
0 / 5 - 0 ratings