在呈現組件之前獲取并驗證數據

　　問題：

　　為了說明這個問題，讓我們以用戶的配置文件為例。

　　我會用一個參數定義動態路由，并呈現配置文件組件，在組件內部，我將從中獲取，并在內部發出獲取請求以獲取用戶信息。users/:userId userId useParams useEffect

　　問題是，真的可以是任何東西。它可能是或...由于 React 在客戶端執行所有操作，因此即使有人將 URL 更改為無效內容，頁面組件也會呈現，例如，如果有人嘗試訪問已刪除的用戶配置文件的 URL。userId 12 hellomom users/hilol

　　當然，擁有良好的結構非常重要，在獲取數據時在頁面組件中顯示加載指示器，如果獲取失敗，則顯示錯誤消息至關重要。但是，如果我們可以在渲染組件之前獲取并驗證數據呢？

　　我的解決方案

　　我構建了一個管理器組件，負責驗證 fetch 響應是否正常，如果可以，則呈現頁面組件，否則顯示 404 頁面。

　　讓我引導您完成代碼。

　　首先，我將頁面組件包裝在管理器組件中，如下所示：

　　然后，我會向管理器傳遞一個名為 prop 的 prop，這是一個接收路由參數并返回 fetch 請求的函數。fetcher

　　當用戶進入頁面時，將發生的第一件事是管理器將執行第一個useEffect，即執行驗證的那個。僅當路徑名不在 中時。invalidRoutesRef

　　注意：每次掛載都會是空的，我建議你使用 Redux 或 React 上下文來存儲，以避免驗證路由徒勞無功。invalidRoutes

　　我使用而不是簡單地使用像 一樣的標志的原因是，我注意到在導航到不同的配置文件后，其值將保留為“false”，因此即使 有效，頁面也會顯示404。invalidRoutesRef isValid isValid userId

　　該函數首先將 設置為 true(Hint：默認將其設置為 true，以便在第一次渲染