今天繼續對 react router 做說明

除了上篇的 Link 外，react-router 還有一個叫 NavLink 的東西..

NavLink component

NavLink 基本上跟 Link 大同小異，差別在於額外的特性，當內容顯示 to 指定的 component 時，該 NavLink 會增加一個被 active 的 class

NavLink-activeClassName

當 url= /todolist 時，對 NavLink 添加一個名為 activeNav 的 class
App.js 中

<NavLink 
    exact 
    activeClassName="activeNav" 
    to="/todolist">
        todo navLink
</NavLink>

匯入 App.css 並在其中寫對應的樣式

.activeNav{
  background-color:#ffdd00;
}

這時候如果連到 url = /todolist 會顯示

NavLink-activestyle

當 url= /todolist 時，對 NavLink 添加一個名為 activestyle 的樣式
activestyle 為 object

<NavLink 
    exact 
    activeStyle={{color:'#ff0000' , fontSize:'28px'}} 
    to="/todolist">
        todo navLink
</NavLink>

這時候如果連到 url = /todolist 會顯示

NavLink-isActive

對 NavLink 狀態為 active 時添加的額外觸發函式
該函式可以使用兩個參數( match , location )

<NavLink 
    exact 
    isActive={( match,location )=>{
        console.log(location);
        if(!match){
            console.log('不是這頁')
        }else{
            console.log('就是這頁')
        }
    }}
    to="/todolist">
        todo navLink
</NavLink>

match 跟 location 都是 object
location 內有幾個參數
pathname : url 的值
key : router 產生的雜湊值

match 內有幾個參數
isExact : 布林值 true 或 false 表示目前 url 是否符合 navLink active
path: 字串，url 的值
url: 字串，url 的值

react-router 指定 **特定 url ** 渲染出特定 component
但 url 並不總是都是寫死的，

useParams 動態參數 URL parameters

每一頁都要寫 專屬的 Route 實在是太累了吧
有沒有辦法動態生成 url 呢?
在 react-router 內可以使用 useParams