在 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 状态？

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

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

预计

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

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 存储将被重置。如果您直接在浏览器中输入网址并导航到

product-detail

页面，则无法正常工作。

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

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

在这种情况下，您需要再次获取产品详细信息。但为此您需要产品 ID。您可以使用路线

/product-details/:id

来实现此目的。获取产品详细信息组件中的

id

并使用 fetch 获取产品详细信息

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

对于鼠标单击，请使用

<Link>

。以编程方式使用

<Redirect>

Answer 4

我正在努力解决同样的问题，但后来我觉得纯html中的

<a>

锚标记重新渲染了我的整个页面，这就是丢失所有状态的原因，所以尝试了react-router-dom的

<Link>

标记和它对我有用。

<Link to="/cart">Cart {cartProducts.length}</Link>