Почему URL страницы Github изменяется при загрузке, из-за чего путь к общедоступному ресурсу неверен?

Question

У меня есть страница React, созданная с помощью create-реакции-приложения, и я развернул ее на страницах github в соответствии с инструкциями здесь . Он открывается, но ресурсы в общем каталоге не загружаются. Кажется, что происходит, что во время загрузки страницы http://{name}.github.io/{repo} усекается до http://{name}.github.io,, и поэтому относительный путь к общедоступному каталогу в этой точке больше не является правильнымкогда страница пытается загрузить их. Если я попытаюсь перезагрузить страницу с URL-адресом http://{name}.github.io, я получу ошибку 404.

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

Код можно увидеть здесь: https://github.com/CBreakr/ATTCK_StarWars

Дополнение к ответу: https://medium.com/@svinkle/how-to-deploy-a-react-app-to-a-subdirectory-f694d46427c1

Answer 1

Трудно сказать, не видя ваш код. Однако вполне вероятно, что ваш react-router настроен неправильно.

Вы должны настроить свой маршрутизатор следующим образом:

import { BrowserRouter as Router } from ‘react-router-dom’;

const routerBaseName = process.env.PUBLIC_URL;

ReactDOM.render(<Router basename={routerBaseName}>< App /></Router>, document.getElementById(‘root’));

Обратите внимание на часть basename - она ​​должна быть настроена для вашего производстваURL-адрес при сборке пакета (в данном случае: https://CBreakr.github.io/ATTCK_StarWars/)

он должен быть установлен на ваш локальный URL-адрес при локальной разработке.

Вы можете использовать .env файлы для установки значений для PUBLIC_URL (я полагаю, что с помощью create-реагировать-app вам придется изменить его на REACT_APP_PUBLIC_URL) для сред dev / prod соответственно, см .: https://create -react-app.dev / Docs / добавлений-заказ переменные окружения

Answer 2

Попробуйте обернуть ваш компонент коммутатора внутри HashRouter следующим образом

import { HashRouter} from "react-router-dom";
<HashRouter basename="/">
     <Switch>
           //...        
     </Switch>

 </HashRouter>

Answer 3

Единственное различие, которое я нашел, в вашей кодовой базе - это домашняя страница в package.json не HTTPS.

Текущие настройки -

"homepage ":" http://CBreakr.github.io/ATTCK_StarWars",

Изменить на -

"homepage": "https://CBreakr.github.io/ATTCK_StarWars",

Хорошо, что ваш репоимеет ветку gh-pages, которая содержит содержимое вашего каталога компоновки. Убедитесь, что в настройках развертывания репозитория используется ветвь gh-pages.

РЕДАКТИРОВАТЬ - ОБНОВЛЕННЫЙ ОТВЕТ

Атрибут URL неправильно настроен для вашего <img> тегов. Возможные значения атрибута:

1. Абсолютный путь к изображению - src="http://www.example.com/image.gif"
2. Относительный путь к изображению - src="image.gif"

Примечание: Если вы заметили, что изображения персонажей не загружаются, но постеры фильма для персонажа загружаются нормально, причина в том, что постеры имеют абсолютный путь к изображению, например, Месть Ситхов имеет источник изображения как - https://vignette.wikia.nocookie.net/starwars/images/e/e7/EPIII_RotS_poster.png/)

Но изображения персонажей настроены как src='/images/vader.jpg'.

Вы можете решить эту проблему, изменив src ваших статических изображений в characters.json с -

"imageURL": "/images/vader.jpg"

на:

"imageURL": "images/vader.jpg"

ИЛИ

"imageURL": "./images/vader.jpg"

Вы можете проверить правильность этого решения, проверив изображение вашего компонента персонажа Вейдера здесь . Обновите источник тега изображения и убедитесь, что изображения персонажей теперь загружаются правильно.

Answer 4

https://create -react-app.dev / документы / разворачивание # обслуживающая на-же-билд-из-разных-путей . Установка вашей домашней страницы таким способом может помочь "homepage": ".".

Также на этой же странице есть еще один учебник, который вы также можете проверить, https://create -react-app.dev / docs / deploy# GitHub-страницы по протоколу HTTPS-pagesgithubcom

Answer 5

Вам нужна домашняя страница, определенная в package.json

"homepage": "http://gitname.github.io/react-gh-pages"

https://github.com/gitname/react-gh-pages#procedure