在撰寫本文時，React Router v6 仍處於 alpha 中，但現在是時候開始玩它並探索即將發生的事情了。本指南將讓您一窺新功能和更改點！
在2018年，React Router 主要維護人員 forke了React Router項目，創建了一個名為Reach Router的輕量級替代方案。
在此期間，兩個庫都在增長，但是似乎Reach Router的活躍開發將停止，並將被合併到即將發佈的React Router v6中。
隨著發佈即將推出，下面是未來內容的！
<switch>變為<routes>/<switch>
該頂級組件將被重命名，但其功能大部分保持不變。
只需在其中放置<routes>：
<route>的重大更改/<route>
在v6中，<route>組件正在接受最大的修改，幸運的是，這些新更改實際上將使它更易於使用！
component/render prop將替換為 element prop：
在v6中，現在傳遞 prop 要容易得多。這否定了在 v5 中使用 render prop。
嵌套路由更簡單
v5中的嵌套路由必須非常明確地定義，這要求在這些組件中包含許多字符串匹配邏輯。如 <profule>：
在 v6 中，可以刪除字符串匹配邏輯，也不需要使用 useRouteMatch() ！結果是令人愉快的
注意：<outlet> 組件的使用類似於React Router v6中的 {this.props.children}，這是Reach Router的一項非常受歡迎的功能！
useNavigate代替useHistory
有時，您可能需要以編程方式進行導航，例如，在用戶提交表單之後，需要將他們重定向到確認頁面。這是v5中的 useHistory 庫，在v6中已重命名為 useNavigate：
現在 history.push() 將替換為 navigation()：
在某些情況下，您需要替換瀏覽器歷史記錄中的URL，而不是推送新的URL。對於v6，這已發生了一些變化：
從20KB到8KB
通過所有這些更改，您預 bundle 大小會增長，但實際上減少了一半！v5的最bundle約為20kb，而v6僅為8kb。
Bundle 包大小是使用bundlephobia工具計算的。
結束語
我對React Router v6的發佈感到非常興奮又難過，我貌似現在用的還是v4？。
您可以在最新發行說明中閱讀有關React Router v6的更多信息
有關新功能的完整列表，請參見官方的React Router v6遷移指南
你現在使用的React Router是v4還是v5呢？下方留言發表你的答案，大家一起觀察以下。
感謝您的閱讀，本頭條號聚焦大前端技術和程序員成長，如果對你有所啟發和幫助，可以點個關注、收藏。
作者簡介：同名微信公眾號作者，Web前端工程師，全棧開發工程師、持續學習者。
現在關注做同名微信公眾號，送精品視頻視頻教程大禮包！
閱讀更多 做工程師不做碼農 的文章
