Invariant Violation: Browser history needs a DOM

Question

For the server side, the BrowserRouter will not work and thus StaticRouter is to be used as per documentation. I am doing same but I am still getting the error. Following is my setup

Invariant Violation: Browser history needs a DOM

import React from 'react';
import ReactDOMServer from 'react-dom/server';
import { StaticRouter as Router } from 'react-router';

// import our main App component
import App from '../src/App';

const path = require('path');
const fs = require('fs');

export default (req, res) => {
  // get the html file created by CRA's build tool

  console.log('url : ', req.baseUrl);


  const filePath = path.resolve(__dirname, '..', '..', 'build', 'index.html');

  fs.readFile(filePath, 'utf8', (err, htmlData) => {
    if (err) {
      console.error('err', err);
      return res.status(404).end();
    }

    // render the app as a string
    const html = ReactDOMServer
      .renderToString(<Router location={req.baseUrl}>
        <App />
                      </Router>);

    // now inject the rendered app into our html and send it
    return res.send(htmlData
      .replace('<div id="root"></div>', `<div id="root">${html}</div>`));
  });
};