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

Question

快速背景 - 我有一个使用 CRA CLI 创建的 React Redux 应用程序。在我的 App.js 中使用 BrowserRouter 和 react-router-dom 的路由设置了 2 个页面或路由。一种是显示所有产品的/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 页面和可用状态。

Answer 1

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

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