什麼是 React Router
React Router 是個可以替 React 專案來管理路由的套件。根據不同的 URL，在畫面上渲染出相對應的 UI。
為什麼我們需要 React Router
傳統的網站在進行換頁時（點擊連結 --> 網址改變 --> 更新頁面），瀏覽器會傳送一個 request 給 server，接著 server 會回傳一個 HTML 檔案給瀏覽器，這種換頁方式會需重新整理才能更新頁面，因此會產生空白頁，降低使用者體驗。
而 SPA (Single Page Application）改善了傳統網頁換頁時的缺點，將頁面處理的工作全部都交給 client 端執行，因此換頁時不再需要傳送 request 給 server，進而解決了空白頁的缺點，提升使用者體驗 。
而使用 React 並搭配 React Router 就能輕鬆實作一個 SPA 網站。原本當 URL 改變時會向 server 發出請求，使用了 React Router 之後，React Router 則會開始接手管理 URL 發生改變時後續的工作，不會傳送 request 給 server。
開始使用 React Router
下載
在終端機輸入安裝指令。
npm install react-router-dom
可以到 package.json 檔案裡確認是否已經成功安裝以及安裝版本。
基本介紹
開始使用 React Router 的第一步，我們得先使用 BrowserRouter 建構出路由環境、使用 Routes 和 Route 創建出專案中所需的不同網址。
<BrowserRouter>放在最外層<Routes>用來包覆自己設定的<Route><Route>的兩種屬性：- path 設定路徑，如 '/' 表示首頁，亦可用 index 取代
- element 則指定要在該路徑顯示的畫面
（✨做完以上的基本設定之後，就可以透過更改網址來換頁囉！）
- 製作連結
我們總不能叫使用者每次換頁的時候都自己手動輸入網址...因此我們就來製作一個 navbar，上面放有首頁以及 About 頁面的<a></a>連結。
滿心歡喜測試了一下發現，雖然成功換頁了，但卻出現重新整理和空白頁的情況，說好的 SPA 呢？
🎶 登愣登愣登~ 🎶 因為你需要 React Router 提供的法寶： <Link>！
使用 <Link> 來製作連結才能讓 React Router 接管換頁的後續動作，透過設定屬性 to 來指定欲前往的路徑。
如果你打開 dev tool 看，會發現其實 <Link> 就是 <a>，不過 <Link> 經過了特別的處理，因此能夠達到不重新整理頁面就能換頁的效果。（至於做了哪些處理，之後有機會再去研究原始碼）
<Link> VS. <NavLink>
React Router 的官方文件是這麼說他們兩個之間的關係：
A
<NavLink>is a special kind of<Link>that knows whether or not it is "active".
也就是說，<NavLink> 是一種 <Link>，差別在於它知道這個連結是否是 active 的狀態。
我們把 <Link to=‘/about’>About</Link> 改為 <NavLink to=‘/about’>About</NavLink> 看看會發生什麼事。
發現換頁動作依然正常執行，唯一不一樣的地方是，當你打開 dev tool，你會發現 多了一個 active 的 class 還有 aria-current 的屬性。
<NavLink> 的使用時機
會自動添加 active class 的這個特性，讓 <NavLink> 非常適合用來製作 navbar、breadcrumb 或是各種 tabs。因為你可以輕鬆透過設定 active 樣式，讓使用者清楚的知道目前所在的是哪一頁、哪一個 tabs。
/* 當連結為 active，設定背景顏色為紫色、文字顏色為白色 */
nav a.active{
background-color: purple;
color: white;
}
以上的程式碼，都可以在這裡玩看看：
https://codesandbox.io/s/react-router-practice-rj7t7s?file=/src/App.js
還在努力學習中，如有錯誤請不吝指正🙇🏻♀️
Useful Links:
The Net Ninja- YouTube
