Я пытаюсь выяснить, как заставить приложение React SPA поддерживать состояние, когда пользователь перемещается с помощью кнопок браузера назад/вперед. Например, пользователь заполняет форму, затем он перемещается назад и вперед, и форма автоматически восстанавливается.
Я просмотрел много JavaScript-маршрутизаторов, но никто, кажется, не исправляет эту проблему... (или даже вообще).
В настоящее время я использую React Router 4, и это шаблон, который я принимаю:
- когда программно покидает страницу, я сначала сохраняю текущее состояние страницы с помощью
history.replace(this.state); затем я выхожу из страницы с помощью history.push(newLocation) - когда компонент страницы создается (
componentWillMount), я проверяю для this.props.location.state !== undefined и если это так, я восстанавливаю его с помощью this.setState(this.props.location.state)
Мой вопрос: правилен ли приведенный выше шаблон? предложил? Есть ли лучший и широко принятый способ?
Ответ 1
через некоторое время я нашел разумное решение:
- в реакции, после каждого
this.setState() Я сохраняю состояние, синхронизированное с историей, используя window.history.replaceState({ key: history.location.key, state: this.state}) - когда компонент "страница" монтируется или обновляется (
willMount и willReceiveProps), я проверяю состояние в props.params.location.state: если он есть, я его восстанавливаю; если нет, я создаю новое новое состояние. - при навигации по той же странице я не использую маршруты, я просто использую
this.setState и window.history.pushState - при навигации вне страницы я просто использую маршруты и избегаю пропускать что-либо в состоянии
Это решение, похоже, работает хорошо, единственными незначительными минусами являются:
- состояние должно быть сериализуемым
-
this.setState - это this.setState, потому что она асинхронна, вы не можете использовать this.state после нее, если только вы не обманываете. - начальное пустое состояние должно быть предоставлено функцией, которая будет использоваться во время фазы восстановления или инициализации, она не может просто оставаться в
constructor() Component - в Firefox, автоматическое восстановление прокрутки после того, как кнопка "Назад" работает случайным образом, не знаю почему, но Chrome и Edge в порядке.
В целом я написал Component PageComponent который расширяет Component который выполняет все PageComponent init/PageComponent; он также переопределяет this.setState чтобы он автоматически синхронизировался с историей и избегал асинхронных раздражений.
