How to maintain react component state when goback from router?

Question

I have two react components let say A and B. When A is shown on the page, user changes something on that page which cause some states changed inside A. Then user click a button which navigate to B by router.push('/b'). Then user click a back a back button and navigate the page to A which is done by router.goBack(). Now the current URL is A but the previously updated states are gone. How can I maintain the state when user go back to A?

Answer 1

I think you just need to enable BrowserHistory on your router by intializing it like that : <Router history={new BrowserHistory}>.

Before that, you should require BrowserHistory from 'react-router/lib/BrowserHistory'

I hope that helps !

 var BrowserHistory = require('react-router/lib/BrowserHistory').default;

var App = React.createClass({
 render: function() {
    return (
        <div>xxx</div>
    );
  }
});

React.render((
<Router history={BrowserHistory}>
    <Route path="/" component={App} />
</Router>
), document.body);

Another way you can try is this,

this.context.router.goBack()

No navigation mixin required!

EDIT: Update with React v15 and ReactRouter v3.0.0 (Aug 20th, 2016):

var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button
        className="button icon-left"
        onClick={browserHistory.goBack}>
        Back
      </button>
    );
  }
});