Upgrading to React Router v6
在先前的課程中,都是以 React Router v5 作為範例,但在這篇筆記紀錄的當下,React Router 已經推出 v6 了,所以接下來將升級 v5 的專案至 v6,並說明其所帶來的好處
在先前的課程中,都是以 React Router v5 作為範例,但在這篇筆記紀錄的當下,React Router 已經推出 v6 了,所以接下來將升級 v5 的專案至 v6,並說明其所帶來的好處
在某些需求下,除了一層 route 切換主頁面之外,可能還會再有內層 route 切換內部元件,形成 Nested Route,但為了避免改動上層路徑名稱就要接連改動下層的名稱,React Router 提供了更彈性的方式取得當前路徑參數,避免 hard code 的情況發生
在實際專案的需求中,通常不會那麼單純一個路徑就顯示一種 component 樣式,常見的情況會由相同的 component 帶入不同的資料來顯示不同的內容,因此,在同一個 route 就需要透過 param 來判斷資料的來源
React 是一個 single-page application,顧名思義就是不論如何切換頁面,都是在單一個 html 檔案內替換其中的內容,而非傳統網頁在切換頁面時,都會透過對 server 發出 request 取得新的 html 檔案再渲染到 browser 上,這麼做得好的不外乎就是為了避免頻繁的在切換頁面時送出 request 以提高網站效能,在 React 社群中,有一個很好用的 3rd-part library - React Rotuer 替我們解決了這個問題。
通常在工作上,為了顧及資安問題,通常會透過使用內網以保護公司內部的開發資源與訊息,但也因為這個原因導致許多網站與開發資源被拒於防火牆外,這次在工作上遇到一個非常直接也很困擾的問題是無法直接在內網安裝 npm 相關套件,還好 npm 提供了設定方式以一次性的解決 http/https 與 proxy 的連線問題