Почему отображается пустая страница на github pages?

@Mukzer · Регистрация: 08.09.2018

Студворк — интернет-сервис помощи студентам

Хочу выложить React проект на github pages, почему-то отображается пустая страница после deploy...
Приложение создал через npx create-react-app
Подскажите пожалуйста в чём может быть проблема, уже всё перепробовал

Ветка master - https://github.com/qmorozov/searchApp/tree/master
Ветка gh-pages - https://github.com/qmorozov/se... e/gh-pages
Страница сайта github pages - https://qmorozov.github.io/searchApp/

@mr_dramm · 26.07.2022, 22:34

Потому что index.html должен быть в корневой папке по крайней мерее по умолчанию, на ее судя по документации можно поменять но я не пробовал (пятый пункт)

@Mukzer · 27.07.2022, 10:18 **[ТС]**

index.html находится в корне build версии react приложения (ветка gh-pages), он и открывается, стили загружаются, но вот само приложение не отображается...

@Rius · 27.07.2022, 11:05

Там скрипты ищутся в /searchapp, а это не понятно где.

@Mukzer · 27.07.2022, 11:11 **[ТС]**

Делал по статьям из интернета по типу этой
https://dev.to/yuribenjamin/ho... pages-2a1f

Где "searchApp" это название репозитория...

@Rius · 27.07.2022, 11:21

Да, в браузере посмотрел, грузится.
Посмотрите сами в DevTools в Chrome (кнопка F12). Там ошибки валятся, по крайней мере у меня.

@Mukzer · 27.07.2022, 11:33 **[ТС]**

(favicon.png:1 GET https://qmorozov.github.io/searchApp/favicon.png 404)
(Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.)

У меня там только одна ошибка, и одно предупреждение, и то ошибка только из-за favicon...
Странно что если скопировать код js и вставить в поле поиска, всё загружается, и открывается, но приложение не работает -_-

@Rius · 27.07.2022, 11:36

Там какой-то индикатор ошибок в консоли и в нём по штук 10 в секунду прибавляется.

unchecked runtime.lastError: The message port closed before a response was received.

Но это может из-за моей сети.

@Mukzer · 27.07.2022, 12:00 **[ТС]**

Странно что в этом приложении всё нормально работает, при том что делал deploy одинаково...

https://qmorozov.github.io/WeatherApp/
https://github.com/qmorozov/We... e/gh-pages

Добавлено через 20 минут
В общем Проблему решил...
Связано было с react-router.

Нужно заменить "BrowserRouter" на "HashRouter".

JavaScript
1
2
3
4
5
6
<HashRouter>
      <Routes>
            <Route path="/" element={<HomePage />}/>
            <Route path="search" element={<SearchPage />}/>
      </Routes>
</HashRouter>

Спасибо всемм за попытки помочь!

Новые блоги и статьи Все статьи Все блоги /
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111

	Почему отображается пустая страница на github pages? 26.07.2022, 22:17. Показов 8392. Ответов 8 Метки github (Все метки) Хочу выложить React проект на github pages, почему-то отображается пустая страница после deploy... Приложение создал через npx create-react-app Подскажите пожалуйста в чём может быть проблема, уже всё перепробовал Ветка master - https://github.com/qmorozov/searchApp/tree/master Ветка gh-pages - https://github.com/qmorozov/se... e/gh-pages Страница сайта github pages - https://qmorozov.github.io/searchApp/ 0

@mr_dramm Молодой техлид) 1818 / 1056 / 329 Регистрация: 17.07.2021 Сообщений: 2,147 Записей в блоге: 14
	26.07.2022, 22:34
	Потому что index.html должен быть в корневой папке по крайней мерее по умолчанию, на ее судя по документации можно поменять но я не пробовал (пятый пункт) 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 10:18 [ТС]
	index.html находится в корне build версии react приложения (ветка gh-pages), он и открывается, стили загружаются, но вот само приложение не отображается... 0

@Rius 13136 / 7696 / 1677 Регистрация: 25.05.2015 Сообщений: 23,479 Записей в блоге: 14
	27.07.2022, 11:05
	Там скрипты ищутся в /searchapp, а это не понятно где. 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 11:11 [ТС]
	Делал по статьям из интернета по типу этой https://dev.to/yuribenjamin/ho... pages-2a1f Где "searchApp" это название репозитория... 0

@Rius 13136 / 7696 / 1677 Регистрация: 25.05.2015 Сообщений: 23,479 Записей в блоге: 14
	27.07.2022, 11:21
	Да, в браузере посмотрел, грузится. Посмотрите сами в DevTools в Chrome (кнопка F12). Там ошибки валятся, по крайней мере у меня. 1

@Mukzer 1 / 1 / 1 Регистрация: 08.09.2018 Сообщений: 111
	27.07.2022, 11:33 [ТС]
	(favicon.png:1 GET https://qmorozov.github.io/searchApp/favicon.png 404) (Error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.) У меня там только одна ошибка, и одно предупреждение, и то ошибка только из-за favicon... Странно что если скопировать код js и вставить в поле поиска, всё загружается, и открывается, но приложение не работает -_- 0

Почему отображается пустая страница на github pages?

Решение