React-Router: принудительная перезагрузка в браузере
У нас есть монолитное реагирующее SPA, развернутое с помощью AWS Cloudfront. Мы пробуем архитектуру микросайта, в которой каждый маршрут/путь в реагирующем приложении будет создан и развернут как отдельное приложение. Для этого мы настроили поведение на основе пути в Cloudfront, чтобы направить запрос в соответствующий источник, который отлично работает.
Из-за своей природы SPA все маршруты, определенные в монолитном приложении реагирования, пытаются загружать страницы без отправки запроса на сервер. Это вызывает проблемы, потому что мы хотим, чтобы несколько маршрутов загружались с сервера, чтобы CloudFront мог правильно направлять запросы.
Как мы можем заставить реагировать-маршрутизатор загружать определенный маршрут с сервера?
<Route exact path = "/example" render = {()=>console.info("load from server?");} />
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Что ж, react-router маршрутизация происходит на уровне клиента, поэтому вам не нужно использовать ее для получения страниц, отображаемых сервером.
Что вам нужно, так это просто тег a, например
<a href = "/example" alt = "A page you want to load">Label</a>
Это выполнимо, но я больше думал об универсальном решении. Идея состоит в том, чтобы постепенно перенести все маршруты с монолита на микросайт, чтобы скоро стало головной болью обновлять ссылки каждый раз, когда мы развертываем новый микросайт.
Вы можете создать собственный компонент Link и добавить что-то вроде белого списка для внешнего URL. При рендеринге вы решите, использовать ли внутреннюю (react-router ссылку) или внешнюю (a ссылку тега) для перенаправления пользователя. Вы также можете использовать свойство isExternal, чтобы избежать белого списка внутри пользовательского компонента Link. Если это имеет для вас смысл, я могу отредактировать свой ответ и добавить эти соображения. Вы можете постепенно изменять свойство isExternal после перемещения маршрута от клиента к серверу (или обновления белого списка). Если все ваши маршруты уже есть в массиве, вы можете добавить его туда.
Похоже, вы используете
react-router-dom@5. Можете ли вы поделиться более полным и исчерпывающим примером маршрутизации/навигации вашего маршрутизатора, маршрутов и маршрутизируемых компонентов?