title: <Link>s rendered outside of a router context cannot navigate
body: <p>I have three <code>div</code> in my <code>index.html</code> file as</p>
  
  <pre><code>&lt;div id="header"&gt;&lt;/div&gt;
  &lt;div id="crm"&gt;&lt;/div&gt;
  &lt;div id="footer"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Now i have <code>rendered</code> header content in header, my main content in crm and footer content in footer like this:</p>
  
  <pre><code>ReactDOM.render(
     &lt;HF.Header /&gt;,
     document.getElementById("header")
  );
  
  ReactDOM.render(
     routes,
     document.getElementById("crm")
  );
  
  ReactDOM.render(
     &lt;HF.Footer /&gt; ,
     document.getElementById("footer")
  );
  </code></pre>
  
  <p>I did this so that i don't have to <code>import</code> header and footer on each page individually. </p>
  
  <p>I have defined my routes in my content as </p>
  
  <pre><code>var routes = (
    &lt;Router history={browserHistory}&gt;
      &lt;Route path="/" component={LoginBox}/&gt;
      &lt;Route path="/dashboard" component={DashBoard} /&gt;
      &lt;Route path="/product" component={ProductLanding}/&gt;
      &lt;Route path="/salesfunnel" component={Salesfunnel}/&gt;
      &lt;Route path="/addmeeting" component={AddMeeting}/&gt;
      &lt;Route path="/pitchProduct" component={PitchProduct}/&gt;
      &lt;Route path="/mysubs" component={MySubs}/&gt;
      &lt;Route path="/updateproduct" component={UpdateProduct}/&gt;
      &lt;Route path="/transactionform" component={AddTransaction}/&gt;
      &lt;Route path="/sellerLanding" component={SellerLanding}/&gt;
      &lt;Route path="/addSeller" component={AddSeller}/&gt;
    &lt;/Router&gt;
  )
  </code></pre>
  
  <p>Now some of my pages like dashboard, meeting are in header and when i want to open that page from header it is giving me this error: </p>
  
  <blockquote>
    <p>Links rendered outside of a router context cannot navigate.</p>
  </blockquote>
  
  <p>Please help me what to do,
  Any help much appreciated.</p>