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

Answer 2

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

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

Answer 3

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

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

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

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

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

对于鼠标单击，请使用<Link>。以编程方式使用<Redirect>

在React Redux应用程序中手动导航时状态丢失

3 个答案: