title: Browser history needs a DOM ( react-router 4 )
body: <p>I am trying to implement server-side-rendering in my react app. I can't access the DOM with server implementation of react, react-dom and react-router. I either have "Browser history needs a DOM" errors. </p>
  
  <p>So my guess is there is something wrong in the way I am wrapping up my component on server or client side.</p>
  
  <p>I will share my structure and important files which are involved in this exercise !</p>
  
  <p>server.js</p>
  
  <pre><code>import React from 'react';
  import { renderToString } from 'react-dom/server';
  // import { StaticRouter } from 'react-router';
  import {StaticRouter} from 'react-router-dom';
  import createBrowserHistory from 'history/createBrowserHistory';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { ConnectedRouter, routerMiddleware } from 'react-router-
  redux';
  import { multiClientMiddleware } from 'redux-axios-middleware';
  import api from "../src/actions/api";
  import rootReducer from "../src/reducers/index";
  import routes from '../src/routes/routes';
  
  const app = express();
  
  app.use(express.static('public'));
  
  app.get('*', (req,res)=&gt;{
  
  const axiosMiddlewareOptions = {
      interceptors: {
          request: [
              (action, config) =&gt; {
                  if (sessionStorage.token) {
                      config.headers['Authorization'] = 'Token '+ sessionStorage.token;
                  }
  
                  return config
              }
          ]
      }
  };
  const history = createBrowserHistory();
  const appRouterMiddleware = routerMiddleware(history);
  const createStoreWithMiddleware = 
  applyMiddleware(multiClientMiddleware(api, axiosMiddlewareOptions), 
  appRouterMiddleware)(createStore);
  const store = createStoreWithMiddleware(rootReducer, {}, 
  window.devToolsExtension ? window.devToolsExtension() : f =&gt; f);
  
  const context = {};
  const html = renderToString(
      &lt;Provider store={store}&gt;
          &lt;StaticRouter location={req.url} context={context}&gt;
              &lt;ConnectedRouter history={history} children={routes}/&gt;
          &lt;/StaticRouter&gt;
      &lt;/Provider&gt;
  );
  
  res.send(`
      &lt;!DOCTYPE html&gt;
      &lt;html&gt;
          &lt;head&gt;
              &lt;meta charset="UTF-8"&gt;
              &lt;title&gt;Title&lt;/title&gt;
              &lt;base href="/"/&gt;
              &lt;link href="assets/img/favikin-hw.png" rel="shortcut 
   icon" type="image/x-icon" /&gt;
              &lt;meta name="viewport" content=" width=device-width, 
   maximum-scale=1"&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
              &lt;div class="wrapper"&gt;${html}&lt;/div&gt;
          &lt;/body&gt;
  
      &lt;/html&gt;
  
  `)
  });
  
  app.listen(process.env.PORT || 8080, ()=&gt;{
     console.log('Server is Listening')
  });
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import createBrowserHistory from 'history/createBrowserHistory';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware } from 'redux';
  import { ConnectedRouter, routerMiddleware } from 'react-router-redux';
  import { multiClientMiddleware } from 'redux-axios-middleware';
  import api from "./actions/api";
  import rootReducer from "./reducers/index";
  import routes from './routes/routes';
  import { BrowserRouter } from 'react-router-dom';
  
  import '../assets/css/bootstrap.min.css';
  import '../assets/style.css';
  import '../node_modules/react-datetime/css/react-datetime.css';
  import '../node_modules/react-select/dist/react-select.min.css';
  
  const axiosMiddlewareOptions = {
      interceptors: {
      request: [
          (action, config) =&gt; {
              if (sessionStorage.token) {
                  config.headers['Authorization'] = 'Token '+     sessionStorage.token;
              }
  
              return config
          }
      ]
      }
  };
  const history = createBrowserHistory();
  const appRouterMiddleware = routerMiddleware(history);
  const createStoreWithMiddleware =     applyMiddleware(multiClientMiddleware(api, axiosMiddlewareOptions),     appRouterMiddleware)(createStore);
  const store = createStoreWithMiddleware(rootReducer, {},     window.devToolsExtension ? window.devToolsExtension() : f =&gt; f);
  
  render(
      &lt;Provider store={store}&gt;
          &lt;ConnectedRouter history={history} children={routes}/&gt;
      &lt;/Provider&gt;,
  document.querySelector('.wrapper'));
  </code></pre>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component, PropTypes } from "react";
  import Header from '../components/Header/Header';
  import Footer from '../components/Footer/Footer';
  import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
  
  class App extends Component {
      render() {
          return (
          &lt;MuiThemeProvider&gt;
              &lt;div className="wrapper-box"&gt;
                  &lt;div className="inner-wrapper"&gt;
                      &lt;Header/&gt;
                      {this.props.children}
                  &lt;/div&gt;
                  &lt;Footer/&gt;
              &lt;/div&gt;
          &lt;/MuiThemeProvider&gt;
      );
      }
  }
  
  App.propTypes = {
      children: PropTypes.object.isRequired
  };
  
  export default App;
  </code></pre>
  
  <p>routes.js</p>
  
  <pre><code>import React from 'react';
  import App from '../containers/App';
  import {
      Route,
      Switch
  } from 'react-router-dom';
  import MainPage from '../containers/MainPage/MainPage';
  import DetailPage from '../components/DetailPage/DetailPage';
  import AboutProject from '../containers/AboutProject/AboutProject';
  import Contacts from '../containers/Contacts/Contacts';
  import SectionPage from '../containers/SectionPage/SectionPage';
  import SearchPage from '../containers/SearchPage/SearchPage';
  import NoMatch from '../containers/NoMatch/NoMatch';
  
  
  export default (
  &lt;App&gt;
      &lt;div&gt;
          &lt;Switch&gt;
              &lt;Route exact={true} path='/' component={MainPage} /&gt;
              &lt;Route path='/about_the_project' component={AboutProject} /&gt;
              &lt;Route path='/contacts' component={Contacts} /&gt;
              &lt;Route path="/search-results/:category/:term" component={SearchPage}/&gt;
              &lt;Route exact={true} path='/:name' component={SectionPage} /&gt;
              &lt;Route path="/articles/:slug" component={DetailPage}/&gt;
              &lt;Route path="/events/:slug" component={DetailPage}/&gt;
              &lt;Route path="/news/:slug" component={DetailPage}/&gt;
              &lt;Route path="/interviews/:slug" component={DetailPage}/&gt;
              &lt;Route path="/technologies/:slug" component={DetailPage}/&gt;
              &lt;Route path='*' component={NoMatch}/&gt;
          &lt;/Switch&gt;
      &lt;/div&gt;
      &lt;/App&gt;
  )
  </code></pre>