一、NavLink的使用

需求：路徑選中時，對應的a元素變為紅色
這個時候，我們要使用NavLink組件來替代Link組件：

• activeStyle：活躍時（匹配時）的樣式；
• activeClassName：活躍時添加的class；
• exact：是否精準匹配；

但是，我們會發現在選中about或profile時，第一個也會變成紅色：

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

默認的activeClassName：

• 事實上在默認匹配成功時，NavLink就會添加上一個動態的active class；
• 所以我們也可以直接編寫樣式
  

當然，如果你擔心這個class在其他地方被使用了，出現樣式的層疊，也可以自定義class

二、Switch的作用

我們來看下面的路由規則：

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

三、Redirect

Redirect用于路由的重定向，當這個組件出現時，就會執行跳轉到對應的to路徑中：

我們這里使用這個的一個案例：

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。