时间戳

首页 > 解决方案 > 在 react redux 应用程序中手动导航时状态丢失

reactjs - 在 react redux 应用程序中手动导航时状态丢失

问题描述

快速背景 - 我有一个使用 CRA CLI 创建的 React Redux 应用程序。在我的 App.js 中使用 BrowserRouter 和 Route of 设置了 2 个页面或路由react-router-dom。一种是显示所有产品的 /products。其次是/product-details显示产品的详细信息。

问题 1 - 当我来到产品页面时，redux 状态包含所有产品信息。当我手动导航到 url/product-details时，带有所有产品信息的 redux 状态都会丢失。为什么会这样？

问题 2 - 除了手动导航，我如何以编程方式从 /products 导航到 /product-details 页面而不会丢失 redux 状态？

我已尝试按照其他 SO 答案中的建议使用 BrowserHistory。但这似乎不适用于我的上述两个问题。

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

预期的

  1. 当我从地址栏手动导航到产品详细信息时，/products 页面的状态应该可用
  2. 应该能够以编程方式导航到 /product-details 页面和可用状态。

标签： reactjsreduxreact-routerstate

解决方案

1）你从哪里得到服务器的数据？也许产品页面？如果是这样，当您手动导航到详细信息页面时，您将无法保留数据。在您的情况下，在详细信息页面中，您应该使用产品 ID 向服务器发送请求以获取产品详细信息。然后它肯定会工作。

2) 详细信息页面的路线应如下所示。 <Route path="/product-details/:id" component={ProductDetails} /> 您可以像这样进入详细信息页面。 this.props.history.push('/product-details/1'); 它肯定会起作用。

推荐阅读