title: How can I change routes in React in response to window message event?
body: <p>I have a React App which is intended to be embedded into another non-react application.  It resides within an iframe on the main applications page.  The react app uses react-router (5.0.0) and react-router-dom (5.1.0) In the react app, when someone clicks a nav link, i fire off a:</p>
  
  <pre><code>window.parent.postMessage(window.location.pathname,"*");
  </code></pre>
  
  <p>So that i can make the parent websites url path match that of the iframe.   I have also tied into the onpopstate event of the parent window so that i can capture the back button of the browser when it is clicked and then fire off a:</p>
  
  <pre><code>iframe.contentWindow.postMessage(new_url, '*');
  </code></pre>
  
  <p>The idea here is that in the React app i will listen for this message and then manually route to the correct location to keep both the parent and the iframe in sync when the back button is clicked.</p>
  
  <p>I have verified that when i use the back button, i do in fact get the message in the iframe, however i am confused on the best way to trigger this re-route.  For now, i put the event listener into the root element like this:</p>
  
  <pre><code>import React from 'react';
  import { Provider } from 'react-redux';
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import { push } from 'react-router-redux';
  import Wizard from '../Wizards';
  
  const Root = (props) =&gt; {
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  
    // Listen to message from child window
    eventer(messageEvent,function(e) {
      console.log(e);
      console.log('props');
  
      console.log(props);
      //props.store.dispatch(push('/broadcast_wizard/step1'));
      //Router.push('/broadcast_wizard/step1');
      //this.context.history.push('/broadcast_wizard/step1');
      console.log('why?');
  
    },false);
  
    return (
      &lt;Provider store={props.store}&gt;
        &lt;Router&gt;
          &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"/&gt;
          &lt;Switch&gt;
            &lt;Route path="/broadcast_wizard/:step" component={Wizard} /&gt;
            &lt;Route path="/:filter?"&gt;
              Root page
            &lt;/Route&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/Provider&gt;
    );
  };
  
  export default Root;
  </code></pre>
  
  <p>In the above examples i have included (commented out) all the things that i have tried so far that have failed.  Please help, new to React but many years of JavaScript experience.</p>