React 16: Warning: Expected server HTML to contain a matching
in
due to State

前端 未结 4 1268
梦谈多话
梦谈多话 2021-01-07 22:43

I\'m getting the following error using SSR

Warning: Expected server HTML to contain a matching

in
.

The issue is on the c

相关标签:
4条回答
  • 2021-01-07 23:36

    My solution is to use a middleware like express-useragent to detect the browser user agent.

    Then, in the server side, create a viewsize like {width, height} by the following rules

    if (ua.isMobile) {
      return {width: 360, height: 480}
    }
    
    if (ua.isDesktop) {
      return {width: 768, height: 600}
    }
    
    return {width: 360, height: 480} // default, and for bot
    

    Then, it is still somehow a responsive design in SSR.

    0 讨论(0)
  • 2021-01-07 23:46

    HTTP Client Hints could help you with this.

    Another interesting article regarding Client Hints.

    0 讨论(0)
  • 2021-01-07 23:48

    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 renderMethod
    if (root && root.innerHTML !== "") {
      renderMethod = hydrate
    } else {
      renderMethod = render
    }
    renderMethod(<BrowserRouter />, document.getElementById("root"))
    
    0 讨论(0)
  • 2021-01-07 23:50

    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')
    );
    
    0 讨论(0)
提交回复
热议问题