今日的重點會放在 React Router 中的 useNavigate 這個 Hook，useNavigate() 可以用在路由的切換，舉例像是進入到個人資訊頁面會先檢查是否有登入，沒有登入的話就會導回 `/login`。

const UserInfo = () => {
    let navigate = useNavigate();
    if (!isLogin) {
        navigate('/login')
    }
}

navigate 的第一個參數可以是路由或是數字。如果是路由就代表前往該路徑，就像是以上程式碼範例就會導回 Login 頁面。如果是數字，例如： `navigate(-1)` 就等於回到上個頁面。

[useNavigate() 文件參考](https://reactrouter.com/start/library/navigating#usenavigate)

### 額外補充
useNavigate() 可以帶上選用參數，這邊也補充給大家～
1. `replace`: boolean，其值為 true 或 false。通常呼叫 navigate 會推送一個新的 entry 到 history stack，所以使用者可以按下前一頁回去，如果填入 replace: true 目前的 entry 在 history stack 內會被取代成新的。例如：當用戶點擊『購買』按鈕但需要先登入時，在登入後跳轉到結帳畫面，若使用 `replace: true`，當他們再次點擊回到前一頁時，不會再次看到登入頁面。
2. `state`: 可為任意值，可用 state 在跳轉路由時傳遞資料，例如：`navigate('/login', { state: { id: 1, } })`，在 Login 元件就可以透過以下方式把傳遞值取出。

const location = useLocation();
console.log(location.state.id) // 1

## 題目
1. 在 Todo 元件中加入 Logout 元件
2. Logout 元件有一顆登出按鈕，點選登出後，使用 navigate 導回 `/login` 畫面。

## 回報流程
將答案寫在專案的 App.js 中，並將完成的內容放到 GitHub 上，複製 App.js 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

// 加入 useNavigate
import { useNavigate } from 'react-router-dom';

// LogOut 元件
const LogOut = () => {
  const  navigate = useNavigate();
  return <button onClick={() => {navigate('/login')}}>登出</button>
}

// 在 Todo 元件中引入 LogOut 元件
const Todo = () => {
  return <Fragment>
    <p>Todo</p>
    <LogOut />
  </Fragment>
}

-->

回報區
---

| # | Discord | GitHub / 答案 |
|:-:|:------------------:|:----------------------------------------------------------:|
| 1 | Noy(Toad) | [Github](https://github.com/MochiTree/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 2 | LinaChen | [GitHub](https://github.com/Lina-SHU/2025-react-daily-task-router/blob/main/src/App.jsx) |
| 3 | 泊岸 | [GitHub](https://github.com/oriascrius/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 4 | 邵 |[GitHub](https://github.com/oxfoxlion/ReactRouter_DailyTask/blob/main/src/App.jsx)|
| 5 | Johnson |[GitHub](https://github.com/tttom3669/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 6 | Kaya |[GitHub](https://github.com/kayaribi/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 7 | Sonia |[GitHub](https://github.com/yujouwu/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 8 | jinliu214 | [GitHub](https://github.com/jinliu214/2025-react-daily-task-router/blob/main/src/App.jsx) |
- 快速複製

| 00 | user | [GitHub]() |