Как сохранить состояние с помощью реакции-роутера

Question

У меня есть приложение реагирования с основным файлом App.js, в котором хранится мое начальное состояние.Затем у меня есть несколько настроек маршрута для навигации по моему приложению.

На одном из маршрутов у меня есть кнопка, которая при нажатии обрабатывает установленное состояние.Я знаю, что это работает, так как я консоль зарегистрировала изменение в состоянии.Тем не менее, он также вызывает:

window.location.href = '/';

Затем он направляет нас на нашу домашнюю страницу.Однако после того, как домашняя страница отображает состояние, возвращается к первоначальной настройке, как описано в App.js.Я не знаю, почему состояние не поддерживается, когда я перенаправлен на другую часть сайта.Учитывая, что я использую реагирующий маршрутизатор, означает ли это, что мне нужно использовать избыточность для обработки состояния приложения?

Answer 1

Использование Reach Router в качестве инструмента маршрутизации вы используете Ссылка :

import { Link } from '@reach/router'

<Link to="/">Homepage</Link>

Это скажет Reach Router визуализировать другойкомпонент (скажем, домашняя страница вместо настроек) и, таким образом, поддерживать состояние.

Answer 2

Это происходит потому, что вы перенаправляете, используя объект окна, а не реагируете маршрутизатор.Вам не нужно использовать излишек.Чтобы использовать реагирующий маршрутизатор, вам нужно использовать метод history .И затем используйте его следующим образом, внутри компонента:

this.props.history.push('/');

Например, возьмите следующий функциональный компонент реакции:

const LoginButton = ({ history }) => (
  <button onClick={() => { history.push('/login'); }} >
    Log in
  </button>
);

Объяснение: Вышеуказанный компонент,уничтожает историю из реквизита, а затем использует ее для перенаправления на страницу входа

Ссылка на историю API: https://reacttraining.com/react-router/web/api/history