当 REST api 返回错误状态时渲染不同的组件答案

【问题标题】：Render a different component when REST api returns error status当 REST api 返回错误状态时渲染不同的组件
【发布时间】：2021-05-14 21:40:25
【问题描述】：

我正在使用预先存在的 React 代码库，但我对 React 不是特别了解。如果 REST api 调用返回 401，则手头的任务是将用户发送到登录（或错误）页面。

有一个 service.js 文件提供对应用程序所需的 REST 服务的提取调用。这些函数是从函数样式组件（例如export default function HomeComp()）调用的，而后者又被 App.js 中的 Route 组件使用。

所以这是我要问的问题：什么被认为是最佳实践设计，在非 React 世界中，什么是简单的重定向到登录屏幕？

我最大的希望是将 Switch 包装在某种 ErrorHandler 组件中，但我无法弄清楚如何以一种从未考虑过的方式将状态从我的 REST api 函数推送到该组件作为“最佳实践”。我一直在摸索 Hooks，但这往往会导致 React 错误，这些错误似乎与“你不能在这个函数中这样做，因为这个函数不是组件”类型的问题有关。当然，我的 REST 调用只是函数，在一个完全独立的文件中，因此未来的其他组件也可能使用它们，所以它们当然不是设计为 React 组件。也许他们应该是，我只是不知道？

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

听起来你正在使用 React Router。

您的登录页面应该有自己的路线。当您发出请求并获得 401 状态时，您将更改为登录路线。

这是它的骨架：

function MyComponent() {
  const history = useHistory();

  useEffect(() => {
    makeApiCall().catch(err => {
      if (/* not authorized */) {
        history.push("/login");
      }
    }
  }, []);

  ...
}

显然这看起来会有所不同，具体取决于您具体在做什么，但检测 401 并使用 history instance 重定向到 /login 路由的要点。

【讨论】：

根据现有代码，React Router 似乎是正确的——我没有意识到它有一个特殊的名称 :) “历史”是我需要专门导入的东西，还是添加了功能自从我上次认真处理该语言以来的 5 年中的 JavaScript？
history 使用 useHistory 挂钩访问。我建议查看 React Router quick start 和其他文档，它会介绍您需要了解的所有内容。