今天會繼續練習 router 設定的部分，如果還沒有做過 [Day 16 的練習](https://hackmd.io/-uadf3ZSRxmy9iv-OFI4_w?view)，建議先完成 Day 16 的任務，再繼續今日的任務練習哦！

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

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

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

[useNavigate() 文件參考](https://reactrouter.com/en/6.15.0/hooks/use-navigate)

### 額外補充
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 / 答案 |
|:-:|:------------------:|:----------------------------------------------------------:|
| 01 | collinkao | [GitHub](https://github.com/collin0825/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 02 | LinaChen | [GitHub](https://github.com/Lina-SHU/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 03 | jasperlu005 | [GitHub](https://github.com/ja5perlu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 04 | David0799 | [GitHub](https://github.com/David07994415/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 05 | Wendy3 | [GitHub](https://github.com/Wendy03/2023-react-daily-task-router/commit/c80f96559e9d802e0f73b09b6bf48284cf71436f) |
| 06 | stevenchang421 | [Github](https://github.com/steven4program/react-daily-task-router/blob/main/src/App.jsx) |
| 07 | AYA | [CodeSandBox](https://codesandbox.io/p/github/study-hex/2023-react-daily-task-router/feature/day17) |
| 08 | 羅羅 | [GitHub](https://github.com/bjqs02/2023-react-daily-task-router/blob/4e20a23b160f4a6942457f26258344d82469279a/src/App.jsx) |
| 09 | Billy.Ji | [GitHub](https://github.com/yaj55billy/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 10 | ejchuang | [GitHub](https://github.com/ejchuang/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 11 | Kaya | [GitHub](https://github.com/Laron9486/2023-react-daily-task-router/blob/1a914a8e37e73f3eb5a88d38bc26ba0986009f38/src/App.jsx) |
| 12 | Wei_Rio | [GitHub](https://github.com/wei-1539/React-17dayWork/blob/main/src/App.jsx) |
| 13 | Leo | [GitHub](https://github.com/Aruminiya/Day17_ReactRouter/blob/main/src/App.jsx) |
| 14 | Yen | [GitHub](https://github.com/tzuhuangyen/React-router/blob/main/src/App.jsx) |
| 15 | 地球儀 | [GitHub](https://github.com/dayday1222/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 16 | 王偉青 | [GitHub](https://github.com/lovegull2/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 17 | 喃喃 | [GitHub](https://github.com/VeLarioCream/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 18 | Aden | [GitHub](https://github.com/spikesandmaen484/20230829ReactRouter/blob/main/src/App.jsx) |
| 19 | yuchih | [GitHub](https://github.com/hijachu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 20 | Ataraxia | [GitHub](https://github.com/QuantumParrot/2023-Hexschool-React-Workshop-Daily-Task-Router/blob/main/src/pages/Todo.jsx) |
| 21 | JJ Wu | [GitHub](https://github.com/jesswu1551/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 22 | cataska | [GitHub](https://github.com/cataska/2023-react-daily-task-router/blob/768767cc3bfee43c175e9947a793fafa87e9290d/src/App.jsx) |
| 23 | 黃士桓 | [codeSanbox](https://codesandbox.io/p/github/huan5678/2023-react-daily-task-router/main) |
| 24 | rainnping | [GitHub](https://github.com/ok0204q/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 25 | curry | [GitHub](https://codesandbox.io/p/sandbox/router-usenavigate-hvzhfk?file=/src/App.tsx:2,44) |
| 26 | 金魚 | [GitHub](https://github.com/CSO-TW-GoldFish/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 27 | 瑀君 | [GitHub](https://github.com/yanennnnn/2023-react-daily-task-router/blob/eb5db81fae4d8456611c7746612cfb7c539f949c/src/App.jsx) |
| 28 | Iris | [GitHub](https://github.com/iris831206/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 29 | 精靈 | [GitHub](https://github.com/sky030b/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 30 | Ingrid | [GitHub](https://github.com/Ingrid-chi/2023_react_daily_task_router/blob/main/src/App.jsx) |
| 31 | Cami | [GitHub](https://github.com/fayevivi/2023-react-daily-task-router/commit/585c7e9e6cf56da57e18e6673ff7e2b52a4d760b) |
| 32 | PollyPO_Lee | [GitHub](https://github.com/pollyPO1986/2023-react-daily-task-router/blob/main/src/App.jsx) |

- 快速複製

| 00 | user | [GitHub]() |