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

Question

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

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

Примечание: Он отлично работает, если я введу URL с hashbang

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

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

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

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

Answer 1

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

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

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

Вы также можете обратиться к ответу Приводимые здесь React-router urls don't work when refreshing or writting manually