Add fix for conditional rendering on mobile together with React 16
This commit is contained in:
10
js/client.js
10
js/client.js
@@ -67,6 +67,16 @@ const handleSetTitle = title => {
|
|||||||
track();
|
track();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// FIXME!
|
||||||
|
// This is a quiet ugly hack, that is needed to hydrate the react root correctly on mobile:
|
||||||
|
// The main issue is, that we render different components based on the view port - which means that
|
||||||
|
// the server-generated DOM differs from the DOM that would be rendered on mobile devices.
|
||||||
|
// We therefore completely ignore the pre-rendered DOM on mobile and let the client render.
|
||||||
|
// To solve this root of this issue, we need to remove the conditional renderings that check "isMobileViewport()"!
|
||||||
|
if (isMobileViewport()) {
|
||||||
|
document.getElementById('root').innerHTML = '';
|
||||||
|
}
|
||||||
|
|
||||||
hydrate(
|
hydrate(
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<App onSetTitle={handleSetTitle} />
|
<App onSetTitle={handleSetTitle} />
|
||||||
|
|||||||
Reference in New Issue
Block a user