我正在使用create react app和react-snapshot为我的路由预渲染静态标记。例如
更新:如果我从create react app中删除服务工作线程,则应用程序可以很好地加载路径的静态文件。然而,我希望保留PWA功能的服务工作线程功能。 更新2: 在
如果我移除了Service Worker,
"/", "/signIn", "/signUp"
分别生成index.html, signIn.html, signUp.html
。但是,我面临的问题是无论我访问哪个路由,最初都会提供从根路由"/"
生成的静态index.html
,然后提供正确的静态路由文件,最后提供main.js
捆绑文件(请参见gif)。如果我只是从打包好的main.js
中提供应用程序,这样做就没问题了。但是,由于我想使用静态预生成的html文件,那么我该如何禁用服务工作线程在某些已经具有静态html文件的路由上提供index.html呢?更新:如果我从create react app中删除服务工作线程,则应用程序可以很好地加载路径的静态文件。然而,我希望保留PWA功能的服务工作线程功能。 更新2: 在
Chrome浏览器
上,根路由静态标记的快速闪烁仅在每个路由上发生一次。在第一次闪烁后,Chrome浏览器缓存似乎修复了它,此外,如果我从Chrome开发工具禁用缓存并尝试转到新路由,则根路由的闪烁会重新出现。
在 Firefox浏览器
上,无论如何问题都存在,每次路由更改或刷新时,根路由静态标记的短暂闪烁都会发生。
如何在不删除服务工作者的情况下避免在所有路由上最初呈现index.html?
更详细地说: 在启用服务工作者的情况下,以下代码会呈现在所有路由的页面源的body中: <body>
<script>window.react_snapshot_state = {};</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" data-react-checksum="-928641672"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="navItemActive sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div class="sc-bdVaJa eRTdVS">Home</div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script></body>
如果我移除了Service Worker,
"/signIn"
路由会在页面源代码的主体中呈现以下内容:<body>
<script>window.react_snapshot_state = {};</script>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" data-react-checksum="143569200"><div data-reactroot="" class="sc-cSHVUG hyLStb"><div class="sc-fjdhpX dIRAsX"><ul class="sc-gqjmRU koKaUp"><li><a class="sc-VigVT cZrGwO" href="/"><!-- react-text: 6 --> <!-- /react-text --><!-- react-text: 7 -->Home<!-- /react-text --></a></li><li><a class="sc-VigVT cZrGwO" href="/aboutUs/"> About US</a></li><li><a class="sc-VigVT cZrGwO" href="/faq/"> FAQ</a></li></ul><div class="sc-jzJRlG cLytIk"><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="user circle icon"></i></button><button class="ui basic circular compact icon button sc-jTzLTM jfwzMH"><i aria-hidden="true" class="add user icon"></i></button></div></div><!-- react-empty: 17 --><div><div style="opacity: 1;"><div><div class="sc-EHOje bssfxk"><div class="sc-EHOje bssfxk"><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="email" placeholder="email" name="email" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form><form class="ui large warning form sc-ifAKCX ljuaXJ"><div class="field"><label></label><input type="password" placeholder="password" name="password" value=""></div><p class="sc-bxivhb dXOlfT">error</p></form></div><p class="sc-dnqmqq ccTWaR"></p><div><div class="sc-gzVnrw cCgvhR"><button class="ui basic button sc-iwsKbI Vfjvd"><!-- react-text: 37 -->Login<!-- /react-text --><!-- react-text: 38 --> <!-- /react-text --></button><div class="sc-gzVnrw cCgvhR"><!-- react-empty: 40 --><div class="ui horizontal divider" style="width: 220px;">Or</div><div class="sc-bZQynM kECAnI"><button class="ui google plus button" style="text-transform: capitalize;"><i aria-hidden="true" class="google icon"></i><!-- react-text: 45 --> Google<!-- /react-text --></button><button class="ui facebook button" style="text-transform: capitalize;"><i aria-hidden="true" class="facebook icon"></i><!-- react-text: 48 --> Facebook<!-- /react-text --></button></div></div></div><div><p class="sc-htoDjs dErAlA">forgot your password ?</p></div></div></div></div></div></div></div></div><script type="text/javascript" src="/static/js/main.04df5475.js"></script><iframe style="display: none;"></iframe>
GiF展示了我尝试访问“/signIn”路由,并注意到在实际表单渲染出来之前,词语“home”(“/”路由的静态标记)会暂时出现。请保留HTML标签。