Сохранить состояние в компоненте React Router?

Question

Хорошо, я в некотором смысле новичок в React, и я работаю над простым приложением реакции, которое состоит из 3 страниц.Я использую react-router, частично, чтобы я мог научиться его использовать.

На одной странице у меня есть форма, которая устанавливает некоторое состояние.Очевидно, что состояние не сохраняется при переходе на другой маршрут, поскольку react-router отображает другой компонент.

Решение # 1

Решение состоит в том, чтобы иметь основнойКомпонент «Приложение» отображает одну из 3 страниц / компонентов (просматривая текущий маршрут с параметрами) и просто сохраняет там состояние.

Solution # 2

Другое решениекажется очевидным сохранение состояния в компоненте Router вместе со всеми методами для обновления состояния.

Тогда я мог бы просто передать методы для обновления состояния компонентов в маршрутизаторе.Это казалось хорошей идеей, но я не могу найти в Интернете ничего о том, что кто-то делает что-то подобное.

Я вижу много redux, но это излишне для того, что я делаю.

Так это возможно?Если это так, есть ли какая-то причина, по которой я ничего не могу найти по этому поводу?(Я пропускаю какие-то ужасные вещи безопасности или другие ошибки, которые могут это сделать.)

Answer 1

Вместо избыточности, я думаю, вы также можете попробовать реагировать на контекст. Ref

Вы можете создать контекст в своем компоненте приложения и обернуть 3-страничные компоненты в Context Provider для доступа к контексту.Вы можете передать карту при создании контекста со значениями и методами установки, методами получения и использовать эту карту для изменения значений в вашей контекстной карте.Вы можете посмотреть этот разговор для лучшего понимания.

Надеюсь, это поможет.

Answer 2

Redux - это то, что вам нужно.Проверьте также этот подход ниже.

Компонент приложения

class App extends Component {
  state= {
     test: 'test'
  };

  render() {
        return (
        <Route path="/" component={() => {<Home {...this.state.test}/>}/>
      </div>
    );
  }
}