国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何在React路由器中驗證動態路由

如何在React路由器中驗證動態路由

來源:千鋒教育
發布人:syq
時間: 2022-09-14 17:08:25 1663146505

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

31

  問題:

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

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

32

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

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

  我的解決方案

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

  讓我引導您完成代碼。

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

33

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

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

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

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

34

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

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
開班信息
北京校區
  • 北京校區
  • 大連校區
  • 廣州校區
  • 成都校區
  • 杭州校區
  • 長沙校區
  • 合肥校區
  • 南京校區
  • 上海校區
  • 深圳校區
  • 武漢校區
  • 鄭州校區
  • 西安校區
  • 青島校區
  • 重慶校區
  • 太原校區
  • 沈陽校區
  • 南昌校區
  • 哈爾濱校區