I'm getting the following error using SSR
Warning: Expected server HTML to contain a matching <div> in <div>.
The issue is on the client when checking the browser width on component mount, and then setting the state of a component to render a mobile version of it instead.
But the server is defaulting the desktop version of the container as it is not aware of the browser width.
How do I deal with such a case? Can I somehow detect the browser width on the server and render the mobile container before sending to the client?
EDIT: For now I've decided to render the container when the component mounts. This way, both server and client side render nothing initially preventing this error.
I'm still open to a better solution
This will solve the issue.
// Fix: Expected server HTML to contain a matching <a> in
const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;
renderMethod(
<BrowserRouter>
<RoutersController data={data} routes={routes} />
</BrowserRouter>,
document.getElementById('root')
);