一、NavLink的使用

需求：路徑選中時(shí)，對(duì)應(yīng)的a元素變?yōu)榧t色
這個(gè)時(shí)候，我們要使用NavLink組件來替代Link組件：

• activeStyle：活躍時(shí)（匹配時(shí)）的樣式；
• activeClassName：活躍時(shí)添加的class；
• exact：是否精準(zhǔn)匹配；

但是，我們會(huì)發(fā)現(xiàn)在選中about或profile時(shí)，第一個(gè)也會(huì)變成紅色：

• 原因是/路徑也匹配到了/about或/profile；
• 這個(gè)時(shí)候，我們可以在第一個(gè)NavLink中添加上exact屬性；
  

默認(rèn)的activeClassName：

• 事實(shí)上在默認(rèn)匹配成功時(shí)，NavLink就會(huì)添加上一個(gè)動(dòng)態(tài)的active class；
• 所以我們也可以直接編寫樣式
  

當(dāng)然，如果你擔(dān)心這個(gè)class在其他地方被使用了，出現(xiàn)樣式的層疊，也可以自定義class

二、Switch的作用

我們來看下面的路由規(guī)則：

• 當(dāng)我們匹配到某一個(gè)路徑時(shí)，我們會(huì)發(fā)現(xiàn)有一些問題；
• 比如/about路徑匹配到的同時(shí)，/:id也被匹配到了，并且最后的一個(gè)NoMatch組件總是被匹配到；
  
  原因是什么呢？默認(rèn)情況下，react-router中只要是路徑被匹配到的Route對(duì)應(yīng)的組件都會(huì)被渲染；
• 但是實(shí)際開發(fā)中，我們往往希望有一種排他的思想：
• 只要匹配到了第一個(gè)，那么后面的就不應(yīng)該繼續(xù)匹配了；
• 這個(gè)時(shí)候我們可以使用Switch來將所有的Route進(jìn)行包裹即可；

三、Redirect

Redirect用于路由的重定向，當(dāng)這個(gè)組件出現(xiàn)時(shí)，就會(huì)執(zhí)行跳轉(zhuǎn)到對(duì)應(yīng)的to路徑中：

我們這里使用這個(gè)的一個(gè)案例：

• 用戶跳轉(zhuǎn)到User界面；
• 但是在User界面有一個(gè)isLogin用于記錄用戶是否登錄：
  true：那么顯示用戶的名稱；
  false：直接重定向到登錄界面；
  
  
  
  

總結(jié)

以上是生活随笔為你收集整理的react-router的使用（二）——NavLink的使用、Switch的作用、Redirect的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。