#javascript #html #reactjs #github #github-pages
#javascript #HTML #reactjs #github #github-страницы
Вопрос:
Я успешно загрузил простое приложение react на страницу GitHub с помощью gh-pages, и теперь я пытаюсь импортировать проект Shards dashboard (https://github.com/DesignRevision/shards-dashboard-react ) на мою страницу на GitHub, но она показывает только пустую страницу.
Ниже приведена информация, которая у меня есть до сих пор:
- Мой проект GitHub и адрес страницы
https://github.com/HarveyLijh/Company_ESG_Rating_App
https://harveylijh.github.io/Company_ESG_Rating_App/
- Проект Shards dashboard отлично работает на моем локальном
- Мой package.json выглядит так
- Мое окно проверки Chrome выглядит следующим образом
- Я запустил
npm run deployсборку, и она работает без ошибок - Я загрузил свою недавно созданную папку сборки в свой репозиторий GitHub из последней команды
почему это происходит?
Комментарии:
1. это происходит из-за базового URL файлов, если вы сохраняете
"homepage": "."в package.json, он должен работать иbrowserRouterплохо работает на статическом сайте github, вы можете использоватьhashRouter
Ответ №1:
Вам нужно понимать, как работают URL-адреса. URL — это путь, который указывает на некоторый конкретный ресурс на сервере. Но как найти этот ресурс, указанный URL, полностью зависит от интерпретации сервера. Эта интерпретация называется «разрешением».
Сервер может наивно сопоставить URL-адрес с путем локальной файловой системы к физическому файлу на жестком диске. Например http://localhost/foobar/dist/index.html , вероятно, указывает на что-то вроде /etc/www/foobar/dist/index.html , если вы используете сервер nginx или apache.
Это также может быть файл в памяти, который генерируется сервером «на лету». Обычно это делает Php-сервер. http://localhost/home.php это не физический HTML-файл на диске. Но сервер генерирует HTML-контент по запросу.
Теперь есть другой промежуточный подход, который объясняет вашу ситуацию.
Сервер может разрешить основной путь:
и все его подпути:
- https://harveylijh.github.io/Company_ESG_Rating_App/foo
- https://harveylijh.github.io/Company_ESG_Rating_App/foo/bar
- https://harveylijh.github.io/Company_ESG_Rating_App/zoo
все эти пути указывают на один и тот же index.html файл по адресу: https://raw.githubusercontent.com/HarveyLijh/Company_ESG_Rating_App/gh-pages/index.html , который представляет собой физический файл на диске.
Сервер отправляет только тот же HTML-код в браузер. Когда браузер завершит загрузку страницы, JS вмешается, перечитает URL-адрес в вашей адресной строке и далее решит, какое «состояние» или «маршрут» следует отображать внутри приложения React.
Вот как BrowserRouter это работает.
Браузер предоставляет API истории для JS. С помощью этого API JS может управлять URL-адресом, отображаемым в адресной строке, фактически не переходя на другую страницу. Другими словами, поведение по умолчанию для ввода URL-адреса в адресной строке и нажатия клавиши ENTER временно отключено. Все это время вы просто просматриваете один и тот же index.html файл.
Для поддержки BrowserRouter служба страниц github должна сначала поддерживать вышеупомянутое поведение разрешения вложенных путей к тому же index.html , но, к сожалению, это не настраивается.
Решение
Есть простой способ: просто скопируйте ваше index.html и переименуйте его в 404.html !
Из-за сбоя разрешения всех вложенных путей страница github будет отображаться 404.html , и вуаля, проблема решена!
Подробнее об этом взломе см.: https://github.com/rafgraph/spa-github-pages
Ответ №2:
Я до сих пор не знаю, почему возникает эта проблема, но меняю BrowserRouter на MemoryRouter