react-router-dom 更新到v6 , 本文分享下v6 與 v5 的一些區(qū)別

1. v6 中 Switch 名稱變?yōu)?Routes

代碼如下：

2. v6 <Route>的變化

不再支持子組件和 component , 改為 element

改為

注：

element 的值為組件標(biāo)簽，不要忘記寫成標(biāo)簽形式

Route 標(biāo)簽必須包含在Routes標(biāo)簽里，會(huì)不然報(bào)錯(cuò)

3. v6 中，exact 屬性不再需要

v6 內(nèi)部算法改變，不再需要加exact實(shí)現(xiàn)精確匹配路由，默認(rèn)就是匹配完整路徑。

如果需要舊的行為，路徑后加/*

4. v6 中，Route 先后順序不再重要，React Router 能夠自動(dòng)找出最優(yōu)匹配路徑

5.v6 保留Link，NavLink， 但是NavLink的activeClassName屬性被移除

刪除了 activeClassName 樣式，如果想自己給它設(shè)置想要的highligh樣式.

可以通過style屬性修改actived的狀態(tài), 通過箭頭函數(shù)接收到isActive參數(shù)值;

style接收一個(gè)css樣式數(shù)據(jù)返回值進(jìn)行修改<NavLink> active狀態(tài)樣式。

6. v6 移除 Redirect組件，改為使用 Navigate:

<Navigate replace to="/welcome" /> 是對舊的 Redirect 的完整取代。

replace 屬性也可以省略，不過行為由 replace 改為 push

7. v6 嵌套路由改為相對匹配

嵌套路由必須放在<Routes> </Routes>中，且使用相對路徑，不再像 v5 那樣必須提供完整路徑，因此路徑變短。

8.使用Outlet組件，此組件是一個(gè)占位符，告訴 React Router 嵌套的內(nèi)容應(yīng)該放到哪里。

9. 使用index 指定默認(rèn)路由, 或者path為空

當(dāng)嵌套路由有多個(gè)子路由的時(shí)候，可以增加 index 屬性來指定默認(rèn)路由。

或者

設(shè)置path為空，來指定默認(rèn)路由，代碼如下：

10. v6 用useNavigate實(shí)現(xiàn)編程式導(dǎo)航，useHistory被移除

如果要重定向:

除此之外，還可以使用navigate(-1)后退到前一頁，使用navigate(-2)后退到前一頁的前一頁，navigate(1)前向?qū)Ш?，依此類推?/p>

11. hooks 中獲取參數(shù)的方法

useParams

返回當(dāng)前動(dòng)態(tài)路由參數(shù)

useSearchParams

使用 useSearchParams hook 來訪問查詢參數(shù)(/xx/xx?userId=123)。其用法和 useState 類似，會(huì)返回當(dāng)前對象和更改它的方法。

更改 searchParams 時(shí)，必須傳入所有的查詢參數(shù)，否則會(huì)覆蓋已有參數(shù)。

12. useRoutes 聲明式的路由配置方式

聲明式路由中，不能寫index, 可以讓path: "" , 來實(shí)現(xiàn)顯示默認(rèn)組件;

useRoutes函數(shù)，會(huì)返回已經(jīng)渲染好的路由元素

茍有恒 , 何必三更眠五更起

關(guān)注我 ，一起學(xué)習(xí)吧? ?

鼓勵(lì)一下，賜個(gè)贊 和 在看吧

(?公主號: bug 收集?)