Приложение React — пустая страница после развертывания при обновлении для всех дочерних страниц. Локально все работает и ⇐ Javascript

[Гость]

Мое приложение React не будет отображать ни одну из дочерних страниц (включая страницу NotFound) при выполнении обновления. При использовании кнопок в приложении все страницы отображаются правильно. Это происходит только в среде хостинга. Я пробовал традиционный хостинг и развертывание своего приложения через cPanel и в настоящее время в AWS Amplify, но в обоих случаях одна и та же проблема. И это единственная ошибка, которую я получаю в консоли.

Не удалось загрузить ресурс: сервер ответил со статусом 404 ()

Я уже более двух дней перепробовал все советы, найденные по поводу интернированных боев, но ничего не помогло. На самом деле работает одна вещь: , которая вставляет «#» между именем домена и именем страницы и сохраняет значения в #. С HashRouter все работает отлично, но создатели React не рекомендуют это решение в официальной документации

Это мой файл App.js:

импортировать React из 'реагировать'; import { BrowserRouter as Router, Routes, Route } из «реагировать-маршрутизатор-дом»; импортировать приветствие из «./pages/Welcome»; импортировать HomeUS из './pages/HomeUS'; импортировать HomeGB из «./pages/HomeGB»; импортировать NotFound из './pages/NotFound'; функция Приложение() { возвращаться ( {/* Добавьте этот универсальный маршрут */} ); } экспортировать приложение по умолчанию; Это мой файл index.js:

импортировать React из 'реагировать'; импортировать ReactDOM из «реагировать-дом/клиент»; импортировать "./index.scss" импортировать приложение из «./App»; импортировать AOS из «aos» импортировать «aos/dist/aos.css»; const root = document.getElementById('root'); const appRoot = ReactDOM.createRoot(root); appRoot.render( ); AOS.init({ продолжительность: 1400 }); Я пытался удалить , рекомендованный некоторыми пользователями, но проблема осталась та же.

А вот мой файл настроек package.json:

{ "имя": "myapp", "домашняя страница": "./", "версия": "0.1.0", «частное»: правда, "зависимости": { "@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/free-brands-svg-icons": "^6.4.2", "@fortawesome/free-regular-svg-icons": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", "@fortawesome/react-fontawesome": "^0.2.0", "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "аос": "^2.3.4", "аксиос": "^1.5.0", "cheerio": "^1.0.0-rc.12", "реагировать": "^18.2.0", "react-dom": "^18.2.0", "реагировать-маршрутизатор-dom": "^6.15.0", "реагировать-скрипты": "^5.0.1", "web-vitals": "^2.1.4" }, "скрипты": { "start": "запуск скриптов реагирования", "build": "сборка реагирующих скриптов", "test": "тест реагирования-скриптов", "eject": "извлечь реагирующие скрипты" }, "эслинтконфиг": { "расширяется": [ "реагировать-приложение", "реагировать-приложение/шутка" ] }, "список браузеров": { "производство": [ ">0,2%", "не мертв", "не все op_mini" ], "разработка": [ "последняя версия Chrome", "последняя версия Firefox", "последняя версия сафари" ] }, "devDependency": { "дерзость": "^1.66.1", "sass-loader": "^13.3.2" } } Там, где я уже изменил домашнюю страницу на предложенную:

"homepage": "./", "домашняя страница": "/", "домашняя страница": "https://example.com", Но ни один из них не работает.

На моем сервере.js у меня также есть перенаправление всех маршрутов на index.html:

// Обслуживание приложения React для всех маршрутов app.get('*', (req, res) => { res.sendFile(path.join(__dirname, 'index.html')); });

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