Блог

Главная - Вопросы по программированию - Развернутый сайт Gatsby Netlify запускает пустую страницу при обновлении любой страницы, кроме домашней. Не выполняется локально

Развернутый сайт Gatsby Netlify запускает пустую страницу при обновлении любой страницы, кроме домашней. Не выполняется локально

#reactjs #url-routing #gatsby #netlify #react-dom

#reactjs #url-маршрутизация #gatsby #netlify #react-dom

Вопрос:

Это мой первый сайт 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, как показано ниже. Я пробовал пути «/ page» и «/ page /», оба из которых дают одну и ту же пустую страницу при обновлении.

 import { Link } from 'gatsby';

<Link to="/history">Club History</Link>
<Link to="/teams/">Teams</Link>

Ранее я использовал create-react-app и настраивал маршрутизацию с помощью Switch и Route из react-router-dom в отдельном компоненте просмотра, который я включил в компонент приложения. Я думал, что в Gatsby в этом нет необходимости, поскольку все обрабатывается автоматически, но, возможно, я упускаю что-то основное.

Я много раз просматривал все похожие вопросы и перечитывал документы Gatsby, но, похоже, не могу найти, что я делаю неправильно, любая помощь была бы очень признательна.

Комментарии:

1. Происходит ли это в build локальном режиме? Это должно быть, оно выдает TypeError: Cannot read property 'upgradeElements' of undefined при доступе к /teams . Можете ли вы предоставить более подробную информацию о том, что upgradeElements ?

2. Вы должны исправить build локально, прежде чем сначала запускать проект в Netlify. Попробуйте обновить свой ответ с помощью «множества ошибок». Имейте в виду, что warnings это не errors так. Оба должны быть исправлены, но warnings не будут нарушать ваш код. Возможно, это поможет вам отладить и найти первоначальную ошибку.

3. Спасибо. Я попытался создать локально, и ссылки на страницы сразу же запустили пустую страницу при нажатии (вместо того, чтобы просто не работать при обновлении). После нескольких попыток я изменил все теги gatsby Link на традиционные <a> , и это устранило проблему локально и в Netlify.

4. Я также добавил import 'react-mdl/extra/material.css'; import 'react-mdl/extra/material.js'; в файл navbar, который, возможно, также исправил ошибку, связанную с mdl