在 2021 年 11 月初，React Router 正式釋出 v6 版本，身為 React 開發者已經按捺不住好奇心，想看看這個版本究竟增加了什麼功能?修改了什麼語法?因此就有了這篇文章的誕生。而在這篇文章中，我會介紹 v6 的一些新功能和 v5 有哪些地方不同。
1. Switch 元件被 Routes 取代，傳遞 props 元件的方式也做了調整，出現了新的 props，element
2. Router 變聰明了，不用再加上 exact
在過去，需透過 exact 設定完全符合 url 時才會顯現指定的元件內容，現在 Router 會抓取最相近的 url 去呈現對應的元件。
3. NavLink 的 activeClassName prop 被移除
在 React Router v5 的官網有提到 activeClassName 被移除，v6 直接用 className 去判定即可。
4. 簡化巢狀路由、推出 Outlet API
之前的版本需要搭配 useRouteMatch 去組出巢狀路由，現在可以直接寫上想要的子路由上去。
另外在 path 有沒有加上 ‘/’ 結果都是一樣的:
Outlet api 也是建立巢狀路由的一大利器，以下為官方提供的範例。
在 Dashboard 元件內部，會根據路由 `/messages` 或 `/tasks` 在 <Outlet /> 的地方呈現對應的元件 <DashboardMessages /> or <DashboardTasks>。
5. useNavigate 代替了 useHistory
useNavigate 的第一個參數可以是路由或是數字，代表前進或回去的頁數。
範例1:
範例2:
除了 useNavigate hook 外，v6 也提供了 <Navigate />元件。
6. useRoutes 代替 react-router-config
7. 其他功能
除了上述幾點之外，當然還有其他的變更，像是 React Router v6 整個 bundle size 縮小，更加輕量，不過以上就舉比較常用的幾點來說明，想了解更深入可以點擊我推薦的 youtube 影片或是到官網去閱讀文件囉!
最後，放上在鐵人賽 Day19 文章中介紹 React Router v5 的範例程式碼和修改後的 v6 版本程式碼範例提供給讀者做比較，不過範例中並沒有將文中的全部功能都使用上去，讀者可以自行練習看看哩!
