title: How can I access the history instance outside of React app with React Router v4?
body: <p>I have a React app that shares an external script file to build a company-wide header with vanilla JS. In that header is a logo that is dynamically bound to the root of whatever application is calling it (<code>location.origin</code>).</p>
  
  <p>Capturing the click navigation and using React Router v3 instead was trivial before, since access to the browserHistory occurs wherever you're setting up the routes:</p>
  
  <pre><code>import { browserHistory } from 'react-router';
  
  function captureLogoClick() {
      const logoLink = document.querySelector('#company-header .logo a');
  
      if(logoLink) {
          logoLink.addEventListener('click', (e) =&gt; {
              e.preventDefault();
              browserHistory.push('/');
          });
      } else {
          // Resource hasn't loaded yet
          setTimeout(captureLogoClick, 100);
      }
  }
  captureLogoClick();
  </code></pre>
  
  <p>With React Router v4 (<code>react-router-dom</code>), how can I accomplish this without binding the listener somewhere inside of a component and using <code>props.history</code>?</p>