React Router Problem

We have an iframe within the page, that contains a close button, that will trigger a Router.History.back(). Because it is possible to navigate within the iframe, it will add to the browser history, but not change the path. Calling Router.History.back() will therefore go back in browser history (including iframe history), in stead of only the history captured by our app. I would expect Router.History.back() to only navigate the history of the app, but it does this: https://github.com/rackt/react-router/blob/0.13.x/modules/History.js#L26 This is a solution to that problem. This page includes an iframe and you can navigate within the iframe, but still be able to use the goBack function from history to go back in the react router history. Reference: https://github.com/mjackson/history/issues/195

by robert chang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-with-addons.js"></script>
<script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/3.0.0-alpha.3/ReactRouter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/history/3.0.0-2/History.min.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="app">
    <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var Link = ReactRouter.Link;
var browserHistory = ReactRouter.browserHistory;

var BackButton = React.createClass({
  render: function() {
    return (
      <button className="back" onClick={browserHistory.goBack}>{this.props.children}</button>
    );
  }
});

class App extends React.Component {
  render() {
    const { pathname } = this.props.location
    return (
      <div>
        <ul>
          <li><Link to="/page1">Page 1</Link></li>
          <li><Link to="/page2">Page 2</Link> (click this guy) </li>
        </ul>
        {React.cloneElement(this.props.children || <div />, { key: pathname })}
      </div>
    )
  }
}

class Page1 extends React.Component {
  render() {
    return (
      <div className="Image">
        <h1>Page 1</h1>
        <p>Content of page 1.</p>
      </div>
    )
  }
}

class Page2 extends React.Component {
  render() {
    return (
      <div className="Image">
        <h1>Page 2</h1>
        <p>Click "Login/Sign up" (or click your user name, then "Dashboard", if you are logged in), and then click the browser back button. React Router will navigate back in iframe history first before going back in React app history.</p>
				<p>If you navigate in the iframe and then click the button below it will take you back to where you left off in the app history and ignore the iframe history.</p>
        <BackButton>Go Back</BackButton>
        <iframe src="https://jsfiddle.net" height="600" width="100%"></iframe>
      </div>
    )
  }
}

ReactDOM.render((
  <Router history={window.History.createMemoryHistory()}>
    <Route path="/" component={App}>
      <Route path="page1" component={Page1} />
      <Route path="page2" component={Page2} />
    </Route>
  </Router>
), document.getElementById('app'))