React 16: Warning: Expected server HTML to contain a matching <div> in <div> due to State
This will solve the issue.
// Fix: Expected server HTML to contain a matching <a> inconst renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate;renderMethod( <BrowserRouter> <RoutersController data={data} routes={routes} /> </BrowserRouter>, document.getElementById('root'));
Gatsby
A recent feature flag of gatsby (introduced in v2.28, December 2020) ables to server-side render pages in dev environment.
This flag is set to true by default. In this case, you might see this error message in the console :
Warning: Expected server HTML to contain a matching <div> in <div>.You can disable this flag in gatsby.config.js file :
module.exports = { flags: { DEV_SSR: false, }}doc : https://www.gatsbyjs.com/docs/reference/release-notes/v2.28/#feature-flags-in-gatsby-configjs
The current accepted answer doesn’t play well with TypeScript. Here is what works for me.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <link rel="shortcut icon" href="/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body></html>import React from "react"import { hydrate, render } from "react-dom"import BrowserRouter from "./routers/Browser"const root = document.getElementById("root")var renderMethodif (root && root.innerHTML !== "") { renderMethod = hydrate} else { renderMethod = render}renderMethod(<BrowserRouter />, document.getElementById("root"))