Mismatches between server rendering and client rendering，An error has occurred<!-- react-empty:

[athenrock]

When I use this way，The server returned <!-- react-empty:

 <div data-reactroot="" data-reactid="1" data-react-checksum="-54317812"><div class="main-content" data-reactid="2"><!-- react-empty: 3 --><!-- react-empty: 4 --></div></div>

import { MobileScreen, DesktopScreen } from 'react-responsive-redux'

class Common extends Component {
   render() {
       return (
            <div className="main-content">  
               <MobileScreen>
                    <div>You are a mobile device</div>                    
                </MobileScreen>
                <DesktopScreen>         
                    <div>You are a desktop</div>                    
                </DesktopScreen>
            </div>            
        )
    }
}

And when I use it this ，It's no problem, but it's obviously not what we want.

import { MobileScreen, DesktopScreen } from 'react-responsive-redux'

class Common extends Component {
   render() {
      const {desktop,mobile,phone,tablet} = this.props.responsive   
       return (
            <div className="main-content">  
              {desktop && <div>You are a desktop</div> }
              {mobile && <div>You are a mobile device </div>}
            </div>            
        )
    }
}

Server-side code：

async function clientRoute(ctx, next) {
     const mobileDetect = mobileParser(ctx.request)
    let _renderProps , _redirectLocation
    match({routes, location: ctx.url}, (error, redirectLocation, renderProps) => {    
        _renderProps = renderProps
    })
   if (_renderProps) { 
        let prefetchTasks = []
        prefetchTasks.push(store.dispatch(setMobileDetect(mobileDetect)))  

        await Promise.all(prefetchTasks)
        await ctx.render('index', {
          root: renderToString(
           <Provider store={store}>
                  <RouterContext {..._renderProps}/>
           </Provider>
        state: store.getState()
       })
  } else {        
        await next()
    }

})

[modosc]

sorry i don't immediately see what's going wrong here - please take a look at the example code to see if it makes it clearer.

[athenrock]

sorry i don't immediately see what's going wrong here - please take a look at the example code to see if it makes it clearer.

Thanks~ For a long time, I have forgotten how to solve the problem at that time. I will try your example.