如何解决刷新除主页以外的任何页面时,已部署的Gatsby + Netlify站点会触发空白页面不在本地发生
这是我的第一个Gatsby网站,因此解决方案可能非常简单,该网站是:universityfc.org
每当刷新非主页的页面(或直接导航到那些页面的URL)时,我都会得到一个完全空白的页面。当我使用npm start在本地托管页面时,不会发生这种情况,但是在本地刷新时,空白页面会显示大约一秒钟,然后被正确的内容替换。
检查空白页会指向react-mdl和react-dom错误,但是如果是这种情况,我不确定为什么一切正常直到刷新,以及为什么在本地工作。
uni_soccer_logo.png:1 Failed to load resource: the server responded with a status of 404 ()
social1.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social2.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social3.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social4.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social5.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social6.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social7.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social8.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social9.jpg:1 Failed to load resource: the server responded with a status of 404 ()
social10.jpg:1 Failed to load resource: the server responded with a status of 404 ()
react-dom.production.min.js:209 TypeError: Cannot read property 'upgradeElements' of undefined
at t.value (MDLComponent.js:82)
at lo (react-dom.production.min.js:212)
at pu (react-dom.production.min.js:255)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:19)
at jl (react-dom.production.min.js:122)
at du (react-dom.production.min.js:248)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)
at Du (react-dom.production.min.js:281)
at react-dom.production.min.js:284
Za @ react-dom.production.min.js:209
i.componentDidCatch.n.callback @ react-dom.production.min.js:227
fi @ react-dom.production.min.js:131
lo @ react-dom.production.min.js:212
pu @ react-dom.production.min.js:255
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:19
jl @ react-dom.production.min.js:122
du @ react-dom.production.min.js:248
Zo @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:19
jl @ react-dom.production.min.js:122
Hl @ react-dom.production.min.js:123
Bl @ react-dom.production.min.js:122
tu @ react-dom.production.min.js:240
ju @ react-dom.production.min.js:284
t.hydrate @ react-dom.production.min.js:290
(anonymous) @ production-app.js:180
react-dom.production.min.js:209 TypeError: Cannot read property 'upgradeElements' of undefined
at t.value (MDLComponent.js:82)
at lo (react-dom.production.min.js:212)
at pu (react-dom.production.min.js:255)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:19)
at jl (react-dom.production.min.js:122)
at du (react-dom.production.min.js:248)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)
at Du (react-dom.production.min.js:281)
at react-dom.production.min.js:284
Za @ react-dom.production.min.js:209
n.callback @ react-dom.production.min.js:226
fi @ react-dom.production.min.js:131
lo @ react-dom.production.min.js:212
pu @ react-dom.production.min.js:255
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:19
jl @ react-dom.production.min.js:122
du @ react-dom.production.min.js:248
Zo @ react-dom.production.min.js:239
(anonymous) @ react-dom.production.min.js:123
KqkS.t.unstable_runWithPriority @ scheduler.production.min.js:19
jl @ react-dom.production.min.js:122
Hl @ react-dom.production.min.js:123
Bl @ react-dom.production.min.js:122
tu @ react-dom.production.min.js:240
ju @ react-dom.production.min.js:284
t.hydrate @ react-dom.production.min.js:290
(anonymous) @ production-app.js:180
react-dom.production.min.js:123 Uncaught TypeError: Cannot read property 'upgradeElements' of undefined
at t.value (MDLComponent.js:82)
at lo (react-dom.production.min.js:212)
at pu (react-dom.production.min.js:255)
at KqkS.t.unstable_runWithPriority (scheduler.production.min.js:19)
at jl (react-dom.production.min.js:122)
at du (react-dom.production.min.js:248)
at Zo (react-dom.production.min.js:239)
at qo (react-dom.production.min.js:230)
at Du (react-dom.production.min.js:281)
at react-dom.production.min.js:284
页面组件都位于src / pages中,我使用Gatsby Link导航到这些页面,如下所示。我尝试使用“ / page”和“ / page /”路径,并在刷新时都给出相同的空白页。
import { Link } from 'gatsby';
<Link to="/history">Club History</Link>
<Link to="/teams/">Teams</Link>
以前,我使用过create-react-app,并在我包含在App组件中的单独视图组件中,通过Switch和Route从react-router-dom设置了路由。我认为这在盖茨比(Gatsby)中是不必要的,因为它们都是自动处理的,但也许我缺少一些基本知识。
我已经搜索了所有类似的问题,并多次阅读了Gatsby文档,但似乎找不到我做错的事情,我们将不胜感激。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。