Hooks + TS 搭建一個任務管理系統(五)-- 路由跳轉頁面

語言: CN / TW / HK

theme: cyanosis

本文已參與 「掘力星計劃」 ,贏取創作大禮包,挑戰創作激勵金。

📢 大家好,我是小丞同學,一名大二的前端愛好者

📢 這個系列文章是實戰 jira 任務管理系統的一個學習總結

📢 非常感謝你的閱讀,不對的地方歡迎指正 🙏

📢 願你忠於自己,熱愛生活

在上一篇文章中我們已經寫完了首頁專案列表的展示部分,利用了大量的 custom hook 來處理對 url 進行操作,實現了將 query 對映到 url 的操作,同時利用 react-query 中的 useMutation 搭配實現了樂觀更新的效果,同時利用 useDebounce 來減少請求,優化效能

接下來我們將處理一下其他的頁面,在開發其他頁面之前,我們先樹立好骨架,先將頁面的跳轉以及 title 變化這些基本的獨立於業務之外的東西寫好

💡 知識點搶先看

  • 利用 router 6 實現路由跳轉
  • 封裝 useDocumentTitle設定文件的標題

實現效果

jira-project-router-jump

一、利用 router 實現路由跳轉

實現跳轉我們先把視線放到點選的連結上,在這裡我們給專案利用了 Link 元件進行包裹,同時採用 to 屬性實現了 url 的轉變

tsx { title: '名稱', sorter: (a, b) => a.name.localeCompare(b.name), render(value, project) { return <Link to={String(project.id)}>{project.name}</Link> } }

現在當我們點選第一個專案時,會將路由跳轉到了 projects/1 地址下,這樣顯然是不能找到對應的頁面的,它缺少了頁面的標識

我們在 project/index.tsx 檔案中,編寫側邊欄的樣式,以及設定路由的跳轉,這裡我們需要採用 react-router ,以及 antd 配合實現

```tsx

```

在這裡我們採用了 Menu 選單標籤,利用了 react-router-dom 中的 Link 元件來實現地址的跳轉,側邊欄對地址的操作,會導致右側,看板和任務組的切換,因此我們需要給右側配置相應的 Route 連線元件

```tsx

} /> } /> {/* 預設路由是push,相當於又成為了棧頂,也就是當前頁面被push了兩次,第一次的值不匹配第二次才匹配 */} {/* 採用replace這樣就能替換掉傳入的棧頂元素,下面的路由成為了棧頂*/}

```

在這裡我們需要設定一個 Navigate 用來做路由跳轉的兜底方案,當上面兩個都沒有匹配上時,我們將它的地址拼接/kanban 強制的跳轉到 /kanban 頁面,這也是實現我們從專案列表點選跳轉後顯示看板頁面的原因

在這裡有很多值得注意的地方,我們在這裡採用了 replace替換路由,這是有原因的!

瀏覽器的歷史記錄就像一個棧的資料結構,當我們採用 to 跳轉時,實際上是向棧中 push 了一個路由地址,這裡我們採用 Navigate 來進行設定預設路由,它的操作也是 push,也就是說,我們為了跳轉到當前頁面被 push兩次

因此當我們點選返回上一頁時,又會跳轉到當前的 kanban 頁面,又向棧中 push兩個地址,這樣我們的返回就永遠在這裡不斷地迴圈,永遠返回不去上一頁。

因此在這裡我們需要採用 repalce替換棧頂那個匹配不上的路由地址!

Q&A

在實現這部分的時候,遇到了一些問題,稍微提及一下,給後人乘涼

由於使用的是最新版的 router 在安裝的時候,會讓你選擇版本,目前應該是更新到了 react-router6 - beta4 版本了,在這個版本中使用 Navigate 會有問題,這個 Navigate 的預設路由不會生效,具體原因不是很清楚,遇到這種情況可以降低一下版本到 beta0

這個版本中是沒有問題的

二、封裝 useDocumentTitle 來設定文件的標題

在上面我們已經順利的實現了路由跳轉,對 Router 有了一定的理解,接下來我們來做一個好玩的 hook ,它用來控制文件的標題

jira-project-router-title

大概的效果是這樣,這個 hook 我們可以遷移到其他的專案中使用,複用性很高

我們先理一下思路

  1. 首先需要獲取到當前的 title
  2. 在呼叫 hook 的時候需要接收一個 title ,並設定一個 title
  3. 會不會有時候設定 title 一樣 ,不需要重新設定呢

我們先來看看我們實現好的 useDocumentTitle 是如何使用的

tsx useDocumentTitle('專案列表', false)

第一個引數傳遞的是需要設定的 title ,第二個引數用來配置 title 在元件解除安裝時是不是需要變化

首先我們先來設定一下它接收的引數型別

tsx export const useDocumentTitle = (title: string, keepOnUnmount: boolean = true) => { }

這裡我們接收傳來的 title 和 配置選項

首先我們先讓 title 能夠驅動頁面 title 的更新

我們利用 useEffect 來實現在 title 變化時,修改文件標題

tsx useEffect(() => { document.title = title }, [title])

接下來我們來處理,元件在解除安裝時不變化的情況,為什麼需要新增這個邏輯呢?

如果我們不新增這個邏輯的話,需要每個頁面都指定 title 如果未指定就會顯示預設的 title ,因此我們增加了這個可選配置項

tsx // 利用 useRef 自定義 hook 它會一直幫我們儲存好這個 title值,不會改變, const oldTitle = useRef(document.title).current

首先我們採用 useRef 來儲存當前的 title,也就是更改前的 title

接著我們採用 useEffect 來處理在元件解除安裝時的 title 變化

tsx useEffect(() => { // 利用閉包不指定依賴得到的永遠是舊title ,是程式碼初次執行時的 oldTitle // 不利於別人閱讀 return () => { if (!keepOnUnmount) { document.title = oldTitle } } }, [keepOnUnmount, oldTitle])

這裡我們利用到了閉包的知識, oldTitle 一直是初次執行的 title

📌 總結

這篇文章沒有太多的內容,寫了一個簡單的 hook ,稍稍總結一下

  1. 利用 Router 實現路由跳轉
  2. 避免 react-router 版本問題,產生的錯誤
  3. 封裝高複用性的 hook useDocumentTitle

最後,可能在很多地方講訴的不夠清晰,請見諒

💌 如果文章有什麼錯誤的地方,或者有什麼疑問,歡迎留言,也歡迎私信交流