时间戳

首页 > 解决方案 > 导航回组件时阻止 API 调用

reactjs - 导航回组件时阻止 API 调用

问题描述

我有以下组件：

  1. App: 根组件，它包含到使用 React Router DOM 的其他组件的路由。
  2. MovieScreen，访问时显示movies/:id。
  3. LoginScreen，当用户需要在执行操作之前登录时显示。

考虑这种情况：

  1. 用户访问/movies/awesome-movie。MovieScreen渲染组件并根据 ID 获取并显示电影数据。加载发生在useEffect().

  2. 用户尝试执行需要身份验证的操作，例如将电影标记为已观看。为了进行身份验证，我显示了一个指向 的链接LoginScreen，如下所示：

<Link to="/login">
    <Button>Login</Button>
</Link>

用户按下按钮并转到LoginScreen。

  1. 在LoginScreen中，用户按下后退按钮并导航回MovieScreen。

现在发生的是重新加载电影数据，丢失任何 UI 状态。我想避免这种情况。

据我了解，解决此问题的 React 方法是“提升状态”。

我的一个想法是在组件中加载电影数据，App并且仅在加载 show 时加载MovieScreen。

我的想法是一个好的解决方案吗？还有其他更好的解决方案吗？

标签： reactjsreact-router-dom

解决方案

推荐阅读