React-Router6版本的更新引起的路由用法變化

更新時(shí)間：2022年01月18日 15:34:36 作者：鋒享前端

本文主要介紹了React-Router6版本的更新引起的路由用法變化，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

React Router應(yīng)該是React生態(tài)系統(tǒng)中最受歡迎的庫了，npm周下載量達(dá)600w+，github也有45.2k的加星，足以說明它是一款非常優(yōu)秀的庫，作為React社區(qū)重要的庫，它經(jīng)歷了多次迭代和重大更改，就在上個(gè)月，更是迎來了一個(gè)大的正式版更新6.x，當(dāng)前最新為6.0.2，相對(duì)比于之前的5.x版本做出了較大改變，不管從用法還是從性能上都有了明顯的提升，本文也將用新老版本對(duì)比的方式讓你能以最快的速度上手新用法

話不多說，先列出6.0做出的改變之處：

用法變化
替換為
嵌套路由新寫法
推出全新hook，全面擁抱函數(shù)組件
基于對(duì)象的路由，實(shí)現(xiàn)js配置所有路由
整體代碼比上個(gè)版本減小大約70%

用法變化

組件變化較大，移除了component與render屬性，使用element屬性替代，因?yàn)榕c之前的版本代碼寫法不能兼容，寫法區(qū)別如下

 ?// 5.x用法
? ?<Route path="/home" component={Home} />
? ?<Route path="/login" render={()=><Login/>}/>

? ?// 6.x用法
? ?<Route path="/home" element={<Home/>} />
? ?<Route path="/login" component={<Login/>} />

替換為

v6版本移除了組件，并使用替換，除了能替代組件的功能外，也做了一些改變，比如所有的都必須包裹在中,否則拋出錯(cuò)誤

?// 5.x用法
? ?<Switch>
? ? ? ?<Route path="/home" component={Home} />
? ? ? ?<Route path="/login" component={Login} />
? ?</Switch>

? ?// 6.x用法
? ? <Routes>
? ? ? ?<Route path="/home" element={<Home/>} />
? ? ? ?<Route path="/login" component={<Login/>} />
? ?</Routes>

嵌套路由

v6版本的react-router支持多種嵌套路由寫法，寫法分別如下：

第一種寫法：延續(xù)v5版本寫法，保持原有組件結(jié)構(gòu) 這種寫法比較適合重構(gòu)的項(xiàng)目，不需要改變太多的代碼便能過渡到v6版本

? // App.jsx
? ?<Routes>
? ? ? ?<Route path="/home" element={<Home/>} />
? ? ? ?<Route path="/user/*" element={<User/>} />
? ?</Routes>

? ?// User.jsx
? ?<Routes>
? ? ? ?<Route path="profile" element={<UserProfile/>} />
? ? ? ?<Route path=":/id" element={<UserDetail/>} />
? ?</Routes>

雖然組件結(jié)構(gòu)與v5版本一至，但寫法上有一定的差異，父組件App.jsx中的path屬性最后必須使用星號(hào)(path="/user/*")，子組件User.jsx中的路徑都是相對(duì)于其父級(jí)路徑，所以不需要像v5版本那樣寫全整個(gè)路徑，媽媽再也不用擔(dān)心我會(huì)寫錯(cuò)地址。

另外，如果中的path屬性不以/開頭，則是相對(duì)于其父級(jí)路徑，這樣的好處是使嵌套路由實(shí)現(xiàn)變得更加簡單，并易于組合復(fù)雜的路由和布局

第二種寫法：把所有的寫在一起，配合實(shí)現(xiàn)路由組件的顯示

?// App.jsx
? ?<Routes>
? ? ? ?<Route path="/home" element={<Home/>} />
? ? ? ?<Route path="/user" element={<User/>}>
? ? ? ? ? ?<Route path="profile" element={<UserProfile/>} />
? ? ? ? ? ?<Route path=":/id" element={<UserDetail/>} />
? ? ? ?</Route>
? ?</Routes>

? ?// User.jsx
? ?<Outlet/>

這樣寫法讓我們能更清晰地去了解路由結(jié)構(gòu)，能更好地管理我們的路由，而能讓我們能更精確地把嵌套的路由組件布局到需要位置顯示

第三種寫法：使用useRoutes()實(shí)現(xiàn)路由配置

使用useRoutes配置路由與配置路由效果一致，只是這種寫法使用javascript生成路由，不依賴JSX，返回相應(yīng)結(jié)構(gòu)的路由組件樹，有木有感覺回到了VueRouter？有木有？

 function App(){
       // 以下寫法與第二種寫法效果一至
       const element = useRoutes([
          {path:'/home',element:<Home/>},
          {
               path:'/user',
               element:<User/>,
               children:[
                  {path:'profile',element:<UserProfile/>},
                  {path:':/id',element:<UserDetail/>},
              ]
          }
      ])
       return element
  }

以上三種寫法各有各的優(yōu)點(diǎn)，開發(fā)者可以根據(jù)自身的需求選擇一種來實(shí)現(xiàn)你的嵌套路由

重定向

新版本的react-router移除了組件，但可以使用新增的組件配合組件實(shí)現(xiàn)重定向效果

<Routes>
? ? ? ?<Route path="/home" element={<Home/>} />
? ? ? ?<Route path="/" element={<Navigate to="/home"/>}>
? ?</Routes>

路由跳轉(zhuǎn)

路由配置好后免不了要進(jìn)行頁面跳轉(zhuǎn)，但新版的react-router移除了history對(duì)象，故不能使用v5版本的history（包括useHistory hook）已不能使用，我們可以使用以下兩中方式進(jìn)行跳轉(zhuǎn)

使用或進(jìn)行跳轉(zhuǎn)這種方式與上一個(gè)版本幾乎沒有太大的區(qū)別，唯一的區(qū)別是組件的高亮寫法發(fā)生了變化

   // v5版本
   <NavLink to="/home" activeStyle={{color:'#f00'}}>首頁</NavLink>
   <NavLink to="/home" activeClassName="active">首頁</NavLink>

   // v6版本
   <NavLink to="/home" style={({isActive})=>(isActive?{color:'#f00'}:{})}>首頁</NavLink>
   <NavLink to="/home" className={({isActive})=>isActive?'current':''}>首頁</NavLink>

PS: 默認(rèn)已經(jīng)有一個(gè)高亮的active類，可以直接使用，不需要額外設(shè)置
使用useNavigate()進(jìn)行跳轉(zhuǎn)有時(shí)候我們并不能使用以上兩個(gè)組件進(jìn)行跳轉(zhuǎn)，如根據(jù)ajax請(qǐng)求返回值跳轉(zhuǎn)不同的頁面，這時(shí)我們就得使用js的方式時(shí)行跳轉(zhuǎn)了，雖然新版的react-router已經(jīng)移除掉history對(duì)象，但給我們提供了 useNavigate hook實(shí)現(xiàn)路由跳轉(zhuǎn)，使用方法如下

?import { useNavigate } from "react-router-dom";
? ?let navigate = useNavigate();
? ?navigate(`/home`);

? ?// 跳轉(zhuǎn)且不保留瀏覽記錄
? ?navigate(`/home`,{replace:true});

? ?// 返回上一頁
? ?navigate(-1)

? ?// 對(duì)象方式跳轉(zhuǎn)
? ?navigate({
? ? ? ?pathname:'/home'
? })

需要注意一點(diǎn)就是，在v6版本的react-router中，如果跳轉(zhuǎn)的路徑如果不是以/開頭，則為相對(duì)路徑，相對(duì)于其父級(jí)路由路徑，這樣的設(shè)置能讓我們更好的控制跳轉(zhuǎn)

路由傳參

我們都知道，在進(jìn)行路由跳轉(zhuǎn)時(shí)，可以附帶一些參數(shù)一起傳遞到跳轉(zhuǎn)頁面，新版的react-router已經(jīng)從props中移除了history、location、match，也移除掉了withRouter高階組件，所以無法使用老版本的方式傳參與接收，新版用法如下

search傳參

?let navigate = useNavigate();
? ?navigate(`/home?page=1&size=10`);
? ?navigate({
? ? ? ?pathname:'/home',
? ? ? ?search:'page=1&size=10'
? });

在對(duì)應(yīng)組件接收參數(shù)也很簡單，使用useSearchParams hook進(jìn)行接收，得到URLSearchParams對(duì)象以及設(shè)置search參數(shù)函數(shù)組成的數(shù)據(jù)

? ?function Home(){
? ? ? ?const [searchParams,setSearchParams] = useSearchParams()
? ? ? ?searchParams.get('page');//1
? ? ? ?searchParams.get('size');//10
? ? ? ?return (
? ? ? ? ? ?<div>首頁</div>
? ? ? )
? }

動(dòng)態(tài)路由傳參

   <Route path="/user" element={<User/>}>
       <Route path=":/id" element={<UserDetail/>} />
   </Route>

配置完以上路由后，當(dāng)頁面跳轉(zhuǎn)到/user/123這個(gè)路徑時(shí)，可以在組件中使用useParams hook獲取123這個(gè)id

function UserDetail(){
       const {id} = useParams()
       return (
           <div>id:{id}</div>
      )
  }

state傳參通過、或 useNavigate進(jìn)行跳轉(zhuǎn)時(shí)，都可以傳遞state參數(shù)，用法如下:

 <Link to="/home" state={{idx:1,key:'qf'}}>首頁</Link>
   navigate('/home',{state:{idx:1,key:'qf'}})

在首頁組件中通過useLocation hook獲取state值

 function Home(){
       const {state} = useLocation();
       state.idx; // 1
       state.key; // qf
       return (
           <div>首頁</div>
      )
  }

其他

另外，React路由同樣支持SSR服務(wù)端渲染等其它功能，由于篇幅在限，在此不做過多說明，感興趣的小伙伴請(qǐng)繼續(xù)關(guān)注我，后續(xù)的寫文章專門介紹react-router在在服務(wù)端的用法。

總結(jié)

以上就是本文的所有內(nèi)容，希望通過該文章能讓大家對(duì)新版本react-router有個(gè)全面的認(rèn)識(shí)，以便在項(xiàng)目中應(yīng)用新版路由。更多相關(guān)React-Router6路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: