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

Question

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

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

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

我已经尝试使用浏览器历史记录，如其他SO答案中建议的那样。但这似乎不适用于我的上述两个问题。

<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');它肯定会起作用。

Answer 2

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

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

Answer 3

使用路由器时，应使用<Link>在页面之间导航。否则，将刷新页面并重置您的 redux 存储。如果您直接在浏览器中输入 url 并导航到product-detail页面，它将不起作用。

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

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

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

2) 应该能够以编程方式导航到/产品详细信息 页面和可用状态。

要单击鼠标，请使用<Link>。用于编程使用<Redirect>