昨天我們認識 React-router 是什麼，以及基本的一些使用方法，今天想要來介紹一下其他 React-router 提供的好用 api 。

NavLink

就跟一般的Link相同，是拿來做跳轉的連結，不過這個 NavLink 可以偵測這個連結有沒有匹配到現在的網址，並增加樣式，顯示出這個 link 是 active link。
要用NavLink實作 active link，會用到isActive這個值，這是一個布林值，會判斷現在是否匹配到這個 link。

// 使用物件解構取出 isActive
<NavLink to="/path1" style={
    ({isActive})=>{
        return {
            color: isActive ? "red" : "black"
        }
    }
}>link 1</NavLink>

也可以用在 className 上：

<NavLink to="/path1" className={
    ({isActive})=> isActive ? "red" : "black"
}>link 1</NavLink>

Outlet

有些版面在所有分頁上都相同，例如 Navbar、footer 等，就會希望能用同一個 Layout 來換不同的頁面。這時候可以使用 react-router 提供的 Outlet 做到：

import {Link, Outlet} from "react-router-dom";

const Layout = () => {
    return (
        <div>
          <nav>...</nav>
             <Outlet/>
          <footer>...</footer>
        </div>
    )
}

const App = () => {
    return (
        <Routes>
          <Route path="/" element={<Layout/>}>
            <Route path="first" element={<Page1/>}/>
            <Route path="second" element={<Page2/>}/>
          </Route>
        </Routes>
    )
}

這樣每一頁都會出現相同的 navbar 以及 footer 了。

useNavigate

useNavigate 是一個處理轉址的 function，跟Link有些相似，它可以使用在處理事件的 function 中，或是需要返回上一頁的場合也很好用。
要使用這個 function，需要先從useNavigate拿出 function ：

const navigate = useNavigate();

接著就可以使用了。可以指定特定 path ：

navigate("/home");

也可以跳轉回前幾頁：

nnavigate(-1)

可以把 navigate 放入其他 function 使用：

const Page1 = () => {
   const navigate = useNavigate();
   
   const turnPage = (e) => {
     e.preventEvent();
     
     navigate("/page2");
   }
   return (
     <div>
       <button onClick={turnPage}>
          page 2
       </button>
     </div>
   )
}

動態路由

react-router 也能使用動態路由，也就是依輸入值而定、非固定的路由。

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

:id的部分就是動態路由，會根據跳轉過來的網址變化。如果要取得id ，可以在元件內使用useParams來取得：

import {useParams} from 'react-router-dom'

const User = () => {
  const id = useParams();
  return (
    <div>
      {id}
    </div>
  )
}

這樣就能取用 params 了！

以上就是 react-router 常用的一些功能，除了這些之外其實還有許多實用的功能，礙於我自己也還不是應用的非常熟練，因此介紹幾個比較常用的功能，用這些就能做出很不錯的分頁功能囉！