在學習 React 時，最快樂的莫過遇到淺白易吸收的好文章。
Joe Morgan 所寫的【How To Add Login Authentication to React Applications】就是一例。
參考它的流程，讓我想到可以利用它來設計一款問卷調整系統，App 架構和路由經整理後如下圖所示：
2021/11/24
2021/11/10
React Router 從 v4, v5 升級 v6 的異動
Router v6 的改版所變動之處非常大，許多舊語法、屬性被【移除】，可以說是新產品也不為過，雖然作者有提出未來可能會提供向下相容的語法，但目前為止仍舊沒有出現，我想再回去的機率很低，還是接受現實改為新版語法吧！
withReouter 已移除
withReouter 已移除，改用 Router Hooks 取代，這意味著以前使用 class 所開發的元件將無法繼續使用，改為函式元件似乎是條不得不為的道路。
<Route /> path 移除多路徑陣列寫法
<Route path=["/list", "/list/:id"] /> 寫法在 v6 已不可用，作者說 Router v6 引擎有針對多路由做最佳化，使用多次宣告 Route 很直覺，效能更好。
<Route /> exact、componet、render 屬性移除
exact 屬性移除，前面提到作者有對 Router v6 引擎最佳化，故不再需要 exact 絕對路徑屬性。
Route 的 Component、Render 屬性移除，改以 element 取代，傳參數的方式改為 useParams 等 Hooks 後就不再需要以前的 Component、Render 屬性，寫法可以一致化。
Link, NavLink 移除部份屬性
activeClassName、activeStyle 被移除，改以 Style 屬性取代，這裡官方手冊有個地方範例程式碼寫錯：
而在說明整合的文件中有寫出正確的內容：
範例使用 className 說明，這裡也提到 style 寫法相同，但就僅止於此，一不小心會花很多時間在找問題上。
還是可以寫得出範列所要傳達的效果，請放心。
總結
Router v6 改動的地方非常多，現在書和網路上許多資料還停留在 v4、v5 上，在使用 v6 時常會用到已移除的功能，寫起來倍感艱辛。
改版的過程中會發現其實 v6 改動方向是把路由工作劃分得很清楚，Route 歸 Route；Link 歸 Link，Element 歸 Element，寫作上比較不會有串來串去的情形。
整體來說 v6 的改動是利大於弊，只要你能熬過那升級陣痛期的話。
和你分享 😉
See also
訂閱：
文章 (Atom)