title: Browser history needs a DOM - react server side rendering
body: <p>in my react js app I want to implement server-side rendering.so I followed this <a href="https://github.com/lawwantsin/webpack-course/" rel="nofollow noreferrer">repo</a>.<br>
  right now i'm getting this error.</p>
  
  <blockquote>
    <p>Invariant Violation: Browser history needs a DOM</p>
  </blockquote>
  
  <p>i thought it was <code>StaticRouter</code> error. but I'm already import <code>StaticRouter</code> router and used <code>renderToString</code> function. but I'm getting same error.</p>
  
  <p><strong>app.js</strong>(clientside root file)</p>
  
  <pre><code>import React from "react"
  import ReactDOM from "react-dom"
  import AppRoot from "./routers/AppRouter"
  import { AppContainer } from "react-hot-loader"
  import { createStore, applyMiddleware } from 'redux';
  import { Provider } from "react-redux"
  import reducers from './reducers';
  import reduxThunk from 'redux-thunk';
  const middleware = [
  reduxThunk,
  ];
  export const store = createStore(reducers, composeWithDevTools(
  applyMiddleware(...middleware),
  ));
  function render(Component) {
  ReactDOM.hydrate(
      &lt;Provider store={store}&gt;
          &lt;AppContainer&gt;
              &lt;Component /&gt;
          &lt;/AppContainer&gt;
      &lt;/Provider&gt;,
      document.getElementById("react-root")
  )
  }
  render(AppRoot)
  if (module.hot) {
  module.hot.accept("./routers/AppRouter.js", () =&gt; {
      const NewAppRoot = require("./routers/AppRouter.js").default
      render(NewAppRoot)
  })
  }
  </code></pre>
  
  <p><strong>AppRouter.js</strong>(routing file)</p>
  
  <pre><code>import React from 'react';
  import {Route,BrowserRouter as Router} from 'react-router-dom';
  import { Switch } from "react-router"
  import history from '../components/history';
  import Header from '../components/Header';
  import StepOne from '../components/StepOne';
  import StepTwo from '../components/StepTwo';
  import StepThree from '../components/stepthree/StepThree';
  import StepFour from '../components/StepFour';
  import StepFive from '../components/StepFive';
  import SearchID from '../components/SearchID';
  import Track from '../components/track/Track';
  import Payment from '../components/payment/Payment';
  const AppRouter = (props) =&gt; {
      return(
              &lt;div&gt;
                  &lt;Router  history={history} &gt;
                  &lt;div&gt;
                  &lt;Header /&gt;
                      &lt;Switch&gt;
                          &lt;Route path="/" exact component={StepOne}/&gt;
                          &lt;Route path="/steptwo" exact component={StepTwo}/&gt;
                          &lt;Route path="/stepthree" component={StepThree}/&gt;
                          &lt;Route path="/stepfour" component={StepFour}/&gt;
                          &lt;Route path="/stepfive" component={StepFive}/&gt;
                          &lt;Route path="/track" exact component={SearchID}/&gt;
                          &lt;Route path="/track/:id" component={Track} /&gt;
                          &lt;Route path="/payment" exact component={SearchID} /&gt;
                          &lt;Route path="/payment/:id" component={Payment} /&gt;
                          &lt;Route path="/feedback" component={SearchID} /&gt;
                          &lt;Route path="/:id" exact component={StepOne}/&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
                  &lt;/Router&gt;
              &lt;/div&gt;
  
      )
  }
  export default AppRouter;
  </code></pre>
  
  <p>render.js(server side file)</p>
  
  <pre><code>import React from "react"
  import { renderToString } from "react-dom/server"
  import { StaticRouter } from "react-router-dom"
  import Routes from "../routers/AppRouter"
  import { Provider } from "react-redux"
  import { createStore, applyMiddleware } from 'redux';
  import reducers from '../reducers';
  import reduxThunk from 'redux-thunk';
  
  const middleware = [
  reduxThunk,
  ];
  export const store = createStore(reducers, 
  applyMiddleware(...middleware),
  );
  
  export default () =&gt; (req, res) =&gt; {
  
  
  res.send(`
      &lt;html&gt;
      &lt;head&gt;
      &lt;!--&lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"&gt;--&gt;
      &lt;!--&lt;script src="https://checkout.razorpay.com/v1/checkout.js"&gt;&lt;/script&gt;--&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="react-root"&gt;${renderToString(
          &lt;Provider store={store}&gt;
              &lt;StaticRouter location={req.originalUrl} context={{}}&gt;
              &lt;Routes /&gt;
              &lt;/StaticRouter&gt;
          &lt;/Provider&gt;
          )}
          &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  `)
  }
  </code></pre>
  
  <p>I don't know what is the actual problem.i search alot on google.checked <a href="https://stackoverflow.com/questions/43058684/react-router-4-browser-history-needs-a-dom">this</a> qs also.but no result.<br><strong>i'm stuck since 1 week</strong>.please any help me out how can i solve this problem.</p>