title: react-router 4 - Browser history needs a DOM
body: <p>I am trying server side rendering using react-router 4. I am following the example provided here <a href="https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together" rel="noreferrer">https://reacttraining.com/react-router/web/guides/server-rendering/putting-it-all-together</a></p>
  
  <p>As per the example on server we should use <code>StaticRouter</code>. When I import as per the example I am seeing StaticRouter as undefined</p>
  
  <pre><code>import {StaticRouter} from 'react-router';
  </code></pre>
  
  <p>After doing some research online I found I could use <code>react-router-dom</code>. Now my import statement looks like this.</p>
  
  <pre><code>import {StaticRouter} from 'react-router-dom';
  </code></pre>
  
  <p>However when I run the code I am getting <code>Invariant Violation: Browser history needs a DOM</code> in the browser.</p>
  
  <p>my server.js file code</p>
  
  <pre><code>....
  app.get( '*', ( req, res ) =&gt; {
    const html = fs.readFileSync(path.resolve(__dirname, '../index.html')).toString();
    const context = {};
    const markup = ReactDOMServer.renderToString(
      &lt;StaticRouter location={req.url} context={context} &gt;
        &lt;App/&gt;
      &lt;/StaticRouter&gt;
    );
  
    if (context.url) {
      res.writeHead(302, {
        Location: context.url
      })
      res.end();
    } else {
        res.send(html.replace('$react', markup));
    }
  } );
  ....
  </code></pre>
  
  <p>And my client/index.js code</p>
  
  <pre><code>....
  ReactDOM.render((
    &lt;BrowserRouter&gt;
      &lt;App /&gt;
    &lt;/BrowserRouter&gt;
  ), root);
  ....
  </code></pre>
  
  <hr>
  
  <p><strong>Update v1</strong>
  Reduced my example to a bear minimum and still getting the same error.</p>
  
  <p><strong>clientIndex.js</strong></p>
  
  <pre><code>import ReactDOM from 'react-dom'
  import { BrowserRouter } from 'react-router-dom'
  import App from '../App'
  
  ReactDOM.render((
    &lt;BrowserRouter&gt;
      &lt;App/&gt;
    &lt;/BrowserRouter&gt;
  ), document.getElementById('app'))
  </code></pre>
  
  <p><strong>serverIndex.js</strong></p>
  
  <pre><code>import { createServer } from 'http'
  import React from 'react'
  import ReactDOMServer from 'react-dom/server'
  import { StaticRouter } from 'react-router'
  import App from '../App'
  
  createServer((req, res) =&gt; {
    const context = {}
  
    const html = ReactDOMServer.renderToString(
      &lt;StaticRouter
        location={req.url}
        context={context}
      &gt;
        &lt;App/&gt;
      &lt;/StaticRouter&gt;
    )
  
  res.write(`
    &lt;!doctype html&gt;
    &lt;div id="app"&gt;${html}&lt;/div&gt;
  `)
  res.end()
  }).listen(3000);
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React from 'react';
  import { BrowserRouter as Router, Route } from 'react-router-dom';
  import routes from "./client/routes";
  const App = ( ) =&gt; (
    &lt;Router&gt;
      &lt;Route path="/" exact render={( props ) =&gt; ( &lt;div&gt;Helloworld&lt;/div&gt; )} /&gt;
    &lt;/Router&gt;
  )
  
  export default App;
  </code></pre>