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

Я пытаюсь выяснить, как заставить приложение 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 чтобы он автоматически синхронизировался с историей и избегал асинхронных раздражений.