React router, как восстановить состояние после нажатия кнопки браузера?

Я пытаюсь выяснить, как заставить приложение React SPA поддерживать состояние, когда пользователь перемещается с помощью кнопок браузера назад/вперед. Например, пользователь заполняет форму, затем он перемещается назад и вперед, и форма автоматически восстанавливается.

Я просмотрел много JavaScript-маршрутизаторов, но никто, кажется, не исправляет эту проблему... (или даже вообще).

В настоящее время я использую React Router 4, и это шаблон, который я принимаю:

  1. когда программно покидает страницу, я сначала сохраняю текущее состояние страницы с помощью history.replace(this.state); затем я выхожу из страницы с помощью history.push(newLocation)
  2. когда компонент страницы создается (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 чтобы он автоматически синхронизировался с историей и избегал асинхронных раздражений.