Состояние теряется при навигации вручную в приложении «Реакция редукса»

Question

Быстрый фон - у меня есть приложение React Redux, созданное с помощью CRA CLI.В моем файле App.js настроены 2 страницы или маршруты с использованием BrowserRouter и Route of «response-router-dom».Одним из них является / продукты, которые отображают все продукты.Второй - / product-details, который показывает детали продукта.

Проблема 1 - Когда я перехожу на страницу продуктов, состояние избыточности содержит всю информацию о продуктах.Когда я вручную перехожу на URL «/ product-details», состояние избыточности со всей информацией о продукте теряется.Почему это происходит?

Проблема 2 - кроме ручной навигации. Как программным способом перейти со страницы / products to / product-details без потери состояния избыточности?

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

<Router>
    <div>
      <Route path="/" exact component={Products} />
      <Route path="/product-details" component={ProductDetails} />
    </div>
</Router>

Ожидается - 1) Когда я вручную перехожу к деталям товара из адресной строки, должна быть доступна страница состояния из / products 2)Должен быть в состоянии программно перейти на страницу / product-details и узнать доступное состояние.

Answer 1

1) Где вы взяли данные с сервера? может быть страница товаров? Если это так, вы не можете сохранить данные, когда вы вручную переходите на страницу сведений. В вашем случае на странице с подробной информацией вы должны отправить запрос на сервер с идентификатором продукта, чтобы получить подробная информация о продукте. Тогда это точно сработает.

2) Страница Route for details должна выглядеть следующим образом. <Route path="/product-details/:id" component={ProductDetails} /> И вы можете перейти на страницу с подробностями, как это. this.props.history.push('/product-details/1'); Это будет работать наверняка.

Answer 2

Вы должны использовать <Link> для перехода между страницами при использовании маршрутизатора. В противном случае страница будет обновлена, а ваше хранилище резервов будет сброшено. Если вы введете URL-адрес непосредственно в браузере и перейдете на страницу product-detail, она не будет работать.

<Link to="/product-details" />

1) Когда я вручную перехожу к деталям продукта из адресной строки, Страница состояния / продуктов должна быть доступна

В этом случае вам необходимо снова получить информацию о продукте. Но вам нужен идентификатор продукта для этого. Для этого вы можете использовать маршрут /product-details/:id. Получите id в вашем компоненте сведений о продукте и, используя fetch, получите сведения о продукте

2) Должен быть в состоянии программно перейти к / product-details страница и доступное состояние.

Для щелчка мышью используйте <Link>. Для программно используйте <Redirect>

Answer 3

Похоже, что навигация приводит к тому, что новая страница загружается с сервера.Например, если вы измените URL-адрес вручную в адресной строке или зададите URL-адрес с помощью API местоположения браузера, это вызовет загрузку страницы.Навигация без запуска загрузки новой страницы осуществляется с помощью API истории реакции-маршрутизатора внутри вашего компонента, например:

this.props.history.push('/product-details');