Не удается получить доступ к странице при обновлении из-за Hasbangs в React SPA

Я использую ReactJS SPA, созданный из https://github.com/facebookincubator/create-react-app

Я использую S3 и Cloudfront для обслуживания своего сайта. Все работает нормально, пока я не перезагружу страницу - она ​​выдает ошибку (в моем случае отказано в доступе), так как она не может работать без Hashbang.

Примечание. Если я ввожу URL-адрес с хэш-бангом, все работает нормально.

По сути, это работает: https://example.com/#/dashboard (перенаправляет на https://example.com/dashboard)

Но если я обновляю страницу, выдает ошибку типа:

введите описание изображения здесь

Мы используем browserHistory для сохранения маршрутов. Я показываю только соответствующий код:

<Router history={browserHistory}>
<Route path='/dashboard' component={Dashboardpage} />
</Router>

reactjs create-react-app amazon-s3 amazon-cloudfront hashbang
person Karan Shah    schedule 14.02.2017    source источник

Ответы (2)


arrow_upward
50
arrow_downward

Когда вы запрашиваете https://example.com/dashboard, первый запрос, т. е. https://example.com отправляется на сервер, и он должен вернуть index.html, содержащий ваш реактивный маршрутизатор, который достаточно умен, чтобы понять путь, то есть без хэш-бангов, и загрузить требуемый компонент. Поэтому некоторые маршруты перенаправления должны быть настроены на стороне сервера.

В вашем случае, когда вы нажимаете https://example.com/dashboard, S3 и cloudfront должны обрабатывать коды ошибок. (т.е. 404 или любой другой) и перенаправить страницу на index.html, после чего реагирующий маршрутизатор обработает, какой компонент загружать.

введите описание изображения здесь

введите описание изображения здесь

Надеюсь, мой ответ ясен ;)

Вы также можете обратиться к приведенному здесь ответу URL-адреса не работают при обновлении или записи вручную

person Shailaja shah    schedule 15.02.2017
comment
не могли бы вы отредактировать свой ответ, чтобы прикрепить скриншот конфигурации CloudFront? - person Karan Shah; 15.02.2017
comment
Означает ли это, что мои API-интерфейсы не могут возвращать запрещенный код 403 при вызове ajaxily? - person Darcy; 27.10.2017
comment
Это зависит от того, как вы хотите обрабатывать различные коды ошибок HTTP. Вы можете перечислить вниз, как показано на изображении выше. @Дарси - person Shailaja shah; 30.10.2017
comment
Круто, ты спас мой день. Весь мой день ушел на то, чтобы понять, что происходит не так. Спасибо . @Шайладжашах - person matesio; 27.07.2018
comment
Я попробовал это решение, но оно всегда перенаправляет на домашнюю страницу, а не на правильную страницу... может быть, мне нужно что-то еще, так как я использую Gatsby? - person Jim; 05.11.2019
comment
Стоит отметить, что для применения изменений требуется некоторое время. - person vgulkevic; 05.12.2019
comment
также имейте в виду, что у вас есть переопределение TTL для ошибок, на этом кеше скриншотов TTL установлено всего на 5 секунд, что, вероятно, слишком мало для приложения статических файлов в большинстве случаев. - person Lukas Liesis; 04.08.2021

arrow_upward
1
arrow_downward

Помимо настройки страниц ошибок, объясненной Шайлаей, убедитесь, что ваш дистрибутив CloudFront указывает на конечную точку веб-сайта, а не на конечную точку API. Конечные точки API не будут корректно работать с реактивным маршрутизатором.

Конечная точка API:

имя-ведра.s3-сайт-регион.amazonaws.com

Конечная точка веб-сайта:

имя-ведра.s3-website.region.amazonaws.com

person jWang1    schedule 18.11.2019