Browser history needs a DOM - react server side rendering

Question

in my react js app I want to implement server-side rendering.so I followed this repo.
right now i'm getting this error.

Invariant Violation: Browser history needs a DOM

i thought it was StaticRouter error. but I'm already import StaticRouter router and used renderToString function. but I'm getting same error.

app.js(clientside root file)

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(
    <Provider store={store}>
        <AppContainer>
            <Component />
        </AppContainer>
    </Provider>,
    document.getElementById("react-root")
)
}
render(AppRoot)
if (module.hot) {
module.hot.accept("./routers/AppRouter.js", () => {
    const NewAppRoot = require("./routers/AppRouter.js").default
    render(NewAppRoot)
})
}

AppRouter.js(routing file)

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) => {
    return(
            <div>
                <Router  history={history} >
                <div>
                <Header />
                    <Switch>
                        <Route path="/" exact component={StepOne}/>
                        <Route path="/steptwo" exact component={StepTwo}/>
                        <Route path="/stepthree" component={StepThree}/>
                        <Route path="/stepfour" component={StepFour}/>
                        <Route path="/stepfive" component={StepFive}/>
                        <Route path="/track" exact component={SearchID}/>
                        <Route path="/track/:id" component={Track} />
                        <Route path="/payment" exact component={SearchID} />
                        <Route path="/payment/:id" component={Payment} />
                        <Route path="/feedback" component={SearchID} />
                        <Route path="/:id" exact component={StepOne}/>
                    </Switch>
                </div>
                </Router>
            </div>

    )
}
export default AppRouter;

render.js(server side file)

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 () => (req, res) => {


res.send(`
    <html>
    <head>
    <!--<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">-->
    <!--<script src="https://checkout.razorpay.com/v1/checkout.js"></script>-->
    </head>
    <body>
        <div id="react-root">${renderToString(
        <Provider store={store}>
            <StaticRouter location={req.originalUrl} context={{}}>
            <Routes />
            </StaticRouter>
        </Provider>
        )}
        </div>
    </body>
    </html>
`)
}

I don't know what is the actual problem.i search alot on google.checked this qs also.but no result.
i'm stuck since 1 week.please any help me out how can i solve this problem.

You should StaticRouter instead of BrowserRouter on server side, for starters. See https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/server-rendering.md — Estus Flask, Dec 26 '18 at 09:10
@estus u can see i already used `StaticRouter` in **render.js** (my server file) — zulqarnain, Dec 26 '18 at 09:18
*instead of* , not *in addition to*. The error means that you use BrowserRouter somewhere, otherwise you wouldn't have this error. You use it in AppRouter — Estus Flask, Dec 26 '18 at 09:24
@estus i saw many articles they are using `BrowserRouter` for client side... — zulqarnain, Dec 26 '18 at 09:31
That's correct. For client side. You're trying to use it for server side, hence the problem. — Estus Flask, Dec 26 '18 at 09:32
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/185779/discussion-between-abdulla-zulqarnain-and-estus). — zulqarnain, Dec 26 '18 at 09:32
Sorry, I don't use chats on SO, they don't work well with offline. — Estus Flask, Dec 26 '18 at 09:33
`import {Route,StaticRouter as Router} from 'react-router-dom'` — zulqarnain, Dec 26 '18 at 09:34
You're using client-side `history` with server-side router. `StaticRouter` doesn't need `history` prop. — Estus Flask, Dec 26 '18 at 09:37
i'm unable to load my app,after compilation when i'm going to hit url it showing me this error.(unable to open my app) — zulqarnain, Dec 26 '18 at 09:40
What error? "Browser history needs a DOM"? You cannot get this error if you don't use `BrowserRouter` and `history` in server-side code. Double check that you don't use them. — Estus Flask, Dec 26 '18 at 09:43
can u please [check] gist(https://gist.github.com/theZulqarnain/139b5c938004151145fd194de8f06c92) — zulqarnain, Dec 26 '18 at 09:46
no, after removing history then also i was not working so i added that one — zulqarnain, Dec 26 '18 at 09:49
What does exactly 'not working' mean? At this point the presence of `history` is the problem. It cannot work on server side. — Estus Flask, Dec 26 '18 at 09:50
You shouldn't use `history` library with SSR. It's client-side library. You can check React Router manual regarding SSR, you won't find the mention of `history` there - because it's not needed on server side. — Estus Flask, Dec 26 '18 at 09:58
@estus actually in my project tens of time i used history to push router. — zulqarnain, Dec 26 '18 at 10:00
I'm not sure what you mean. I used it too. On client side. It's unneeded and unwanted on server side. That's the problem here. Use it on client side. Don't use it on server side. I'm not sure how to state this more clearly. — Estus Flask, Dec 26 '18 at 10:16
means i used `history.push('/steptwo')` and `history.location.pathname` many time in my project — zulqarnain, Dec 26 '18 at 11:05

score 0 · Answer 1 · answered Aug 04 '19 at 12:14

I faced the same error while doing SSR because I was using <BrowserRouter> on react code. I fixed it by changing it to <Switch>. My code was like this before

function App() {
    return (
        <ApolloProvider client={client}>
            <div className="App">
                <BrowserRouter>
                    <Header/>
                    <Route path="/" exact component={Home}/>
                    <Footer/>
                </BrowserRouter>
            </div>
        </ApolloProvider>
    );
}

and after fix

function App() {
    return (
        <ApolloProvider client={client}>
            <div className="App">
                <Switch>
                    <Header/>
                    <Route path="/" exact component={Home}/>
                    <Footer/>
                </Switch>
            </div>
        </ApolloProvider>
    );
}

score 0 · Answer 2 · answered Oct 22 '19 at 21:47

0

I had to wrap <Switch> with <BrowserRouter> and it worked.

`ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <App />
        </Switch>
    </BrowserRouter>,
    document.getElementById("root")
);`

answered Oct 22 '19 at 21:47

Luka

33
3
8

Browser history needs a DOM - react server side rendering

2 Answers2