快捷導(dǎo)航

React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)

更新時(shí)間：2022年12月07日 09:09:43 作者：冰雪為融

這篇文章主要介紹了React Router中Link和NavLink的學(xué)習(xí)心得總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

React Router Link和NavLink的學(xué)習(xí)

Link

現(xiàn)在，我們應(yīng)用需要在各個(gè)頁(yè)面間切換，如果使用錨點(diǎn)元素實(shí)現(xiàn)，在每次點(diǎn)擊時(shí)，頁(yè)面被重新加載，React Router提供了<Link>組件用來(lái)避免這種狀況發(fā)生。

當(dāng) 你點(diǎn)擊<Link>時(shí)，url會(huì)更新，組件會(huì)被重新渲染，但是頁(yè)面不會(huì)重新加載

先看個(gè)例子：

// to為string
<Link to="/about">關(guān)于</Link>
 
// to為obj
<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }
}}/>
 
// replace 
<Link to="/courses" replace />

<Link>使用to參數(shù)來(lái)描述需要定位的頁(yè)面。它的值既可是字符串，也可以是location對(duì)象（包含pathname、search、hash、與state屬性）如果其值為字符串，將會(huì)被轉(zhuǎn)換為location對(duì)象

replace(bool)：為 true 時(shí)，點(diǎn)擊鏈接后將使用新地址替換掉訪問(wèn)歷史記錄里面的原地址；為 false 時(shí)，點(diǎn)擊鏈接后將在原有訪問(wèn)歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄。默認(rèn)為 false；

點(diǎn)擊Link后，路由系統(tǒng)發(fā)生了什么？

Link 組件最終會(huì)渲染為 HTML 標(biāo)簽 <a>，它的 to、query、hash 屬性會(huì)被組合在一起并渲染為 href 屬性。

雖然 Link 被渲染為超鏈接，但在內(nèi)部實(shí)現(xiàn)上使用腳本攔截了瀏覽器的默認(rèn)行為，然后調(diào)用了history.pushState 方法（注意，文中出現(xiàn)的 history 指的是通過(guò) history 包里面的 create*History 方法創(chuàng)建的對(duì)象，window.history 則指定瀏覽器原生的 history 對(duì)象，由于有些 API 相同，不要弄混）。

history 包中底層的 pushState 方法支持傳入兩個(gè)參數(shù) state 和 path，在函數(shù)體內(nèi)有將這兩個(gè)參數(shù)傳輸?shù)?createLocation 方法中，返回 location 的結(jié)構(gòu)如下：

location = {
  pathname, // 當(dāng)前路徑，即 Link 中的 to 屬性
  search, // search
  hash, // hash
  state, // state 對(duì)象
  action, // location 類型，在點(diǎn)擊 Link 時(shí)為 PUSH，瀏覽器前進(jìn)后退時(shí)為 POP，調(diào)用 replaceState 方法時(shí)為 REPLACE
  key, // 用于操作 sessionStorage 存取 state 對(duì)象
};

系統(tǒng)會(huì)將上述 location 對(duì)象作為參數(shù)傳入到 TransitionTo 方法中，然后調(diào)用 window.location.hash 或者window.history.pushState() 修改了應(yīng)用的 URL，這取決于你創(chuàng)建 history 對(duì)象的方式。

同時(shí)會(huì)觸發(fā)history.listen 中注冊(cè)的事件監(jiān)聽(tīng)器。

NavLink

<NavLink>是<Link>的一個(gè)特定版本，會(huì)在匹配上當(dāng)前的url的時(shí)候給已經(jīng)渲染的元素添加參數(shù)，組件的屬性有

activeClassName(string)：設(shè)置選中樣式，默認(rèn)值為active
activeStyle(object)：當(dāng)元素被選中時(shí)，為此元素添加樣式
exact(bool)：為true時(shí)，只有當(dāng)導(dǎo)致和完全匹配class和style才會(huì)應(yīng)用
strict(bool)：為true時(shí)，在確定為位置是否與當(dāng)前URL匹配時(shí)，將考慮位置pathname后的斜線
isActive(func)判斷鏈接是否激活的額外邏輯的功能

看例子就懂了：

// activeClassName選中時(shí)樣式為selected
<NavLink
  to="/faq"
  activeClassName="selected"
>FAQs</NavLink>
 
// 選中時(shí)樣式為activeStyle的樣式設(shè)置
<NavLink
  to="/faq"
  activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}
>FAQs</NavLink>
 
// 當(dāng)event id為奇數(shù)的時(shí)候，激活鏈接
const oddEvent = (match, location) => {
  if (!match) {
    return false
  }
  const eventID = parseInt(match.params.eventID)
  return !isNaN(eventID) && eventID % 2 === 1
}
 
<NavLink
  to="/events/123"
  isActive={oddEvent}
>Event 123</NavLink>