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

Posted 2023-02-22

【中文标题】在 react redux 应用程序中手动导航时状态丢失

【英文标题】：State is lost while navigating manually in a react redux application

【发布时间】：2019-10-23 13:18:10

【问题描述】：

快速背景 - 我有一个使用 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>

预期

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

【参考方案1】：

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

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

【参考方案2】：

听起来您的导航方式导致从服务器获取新页面。例如，如果您在地址栏中手动更改 URL 或使用浏览器的位置 API 设置 URL，则会触发页面加载。在不触发新页面加载的情况下进行导航的方法是在组件中使用react-router's history API，如下所示：

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

【参考方案3】：

当您使用路由器时，您应该使用<Link> 在页面之间导航。否则页面将被刷新并且你的 redux 存储将被重置。如果您直接在浏览器中输入网址并导航到product-detail 页面，它将无法正常工作。

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

1) 当我从地址栏手动导航到产品详细信息时， /products 页面的状态应该可用

在这种情况下，您需要再次获取产品详细信息。但是您需要产品 ID。您可以为此使用路线/product-details/:id。在您的产品详细信息组件中获取id 并使用 fetch 获取产品详细信息

2) 应该能够以编程方式导航到 /product-details 页面和可用状态。

鼠标点击使用<Link>。以编程方式使用<Redirect>