當 REST api 返回錯誤狀態時渲染不同的組件

Question

我在一個預先存在的 React 代碼庫中工作，我對 React 不是特別了解。 如果 REST api 調用返回 401，則手頭的任務是將用戶發送到登錄（或錯誤）頁面。

有一個 service.js 文件提供對應用程序所需的 REST 服務的提取調用。 這些函數是從 function 樣式組件調用的（例如，類似於export default function HomeComp() ），而該組件又由 App.js 中的 Route 組件使用。

所以這是我要問的問題：什么被認為是最佳實踐設計，在非 React 世界中，什么是簡單的重定向到登錄屏幕？

我最大的希望是將 Switch 包裝在某種ErrorHandler組件中，但無法解決如何從我的 REST api 中推送 state api 的最佳實踐方式。 " 我一直在摸索 Hooks，但這往往會導致 React 錯誤，這些錯誤似乎與“你不能在這個 function 中這樣做，因為這個 function 不是組件”類型的問題有關。 當然，我的 REST 調用只是函數，在一個完全獨立的文件中，因此未來的其他組件也可能使用它們，所以它們當然不是設計為 React 組件。 也許他們應該是，我只是不知道？

Answer 1

聽起來您正在使用 React Router。

您的登錄頁面應該有自己的路線。 當您發出請求並獲得 401 狀態時，您將更改為登錄路線。

這是一個骨架：

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

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

  ...
}

顯然，這取決於您具體做什么，但這看起來會有所不同，但是檢測該 401 並使用歷史實例重定向到/login路由的要點。