---
tags: 2022 React 新手讀書會
---
# 🏅 Day 14 ｜React Router
今天會繼續練習 router 設定的部分，如果還沒有做過 [Day 13 的練習](https://hackmd.io/VqEGaLa7TAW41hKsWZp4kA?view)，建議先完成 Day 13 的任務，再繼續今日的任務練習哦！

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

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

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

[useNavigate() 文件參考](https://reactrouter.com/docs/en/v6/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 / 答案 |
|:-------------------:|:--------------------------------------------------------------------------------------------------------------------------------------------:|
| Rice#8043 | [GitHub](https://github.com/riceball-tw/react-daily-task-router-main/blob/main/src/App.js) |
| Anson#3594 | [GitHub](https://github.com/huanmingchang/react-daily-task-router/blob/main/src/App.js) |
| 葉秋#2335 | [GitHub](https://github.com/as880074/react-daily-task-router/blob/main/src/App.js) |
| DIANAxAKKO#4298 | [GitHub](https://github.com/redfire29/react-daily-task-router/blob/main/src/App.js) |
| yunyun#5215 | [GitHub](https://github.com/yunniyunyun/react-daily-task-router/blob/main/src/App.js) |
| SHIN#6075 | [GitHub](https://github.com/Shin9626/react-daily-task-router/blob/0e5ee2be166c27b177f03e5108cf4f6620e00fe2/src/App.js) |
| rainbow#3329 | [GitHub](https://github.com/superRainbow/react-daily-task-router/blob/main/src/App.js) |
| Ayre#0016 | [GitHub](https://github.com/not8311/react-daily-task-router/blob/main/src/App.js) |
| 布魯諾#7239 | [GitHub](https://github.com/Bruno-Yu/react-daily-task-router/blob/main/src/App.js) |
| ChloeLo#4858 | [GitHub](https://github.com/chloelo/react-daily-task-router/blob/main/src/App.js) |
| aki | [GitHub](https://github.com/aki168/react-router-test/blob/main/src/App.js) |
| Carolkiki2003 #7399 | [GitHub](https://github.com/carolkiki2003/react-daily-task-router/blob/main/src/App.js) |
| VadaChen#2055 | [GitHub](https://github.com/astrolexa/reactDaily13_Router/blob/main/src/App.js) |
| HedgehogKU | [GitHub](https://github.com/HedgehogKUCC/react-daily-task-router/commit/688c59735a2a9466401ac1095e26349fca90589f) |
| LinaChen#1796 | [GitHub](https://github.com/Lina-SHU/React_Router_Task/blob/master/src/App.js) |
| Yanyan#3555 | [GitHub](https://github.com/Yangunli/react-router) |
| JC#8658 | [GitHub](https://github.com/jcsamoyed/react-daily-task-router/blob/main/src/App.js) |
| Dylan_Lin#7320 | [GitHub](https://github.com/k06132001/reactrouter/blob/master/src/App.js) |
| L0F0#8733 | [GitHub](https://github.com/LOOFOO/react-router-day13/blob/main/src/App.js) |
| 威爾#1694 | [GitHub](https://github.com/letcla0624/react-daily-task-router/blob/main/src/App.js) |
| hw#0715 | [Github](https://github.com/Lhwei/react-daily-task-router/blob/main/src/App.js) |
| yuyu#6310 | [GitHub](https://github.com/yuyu0905/react-daily-task-router) |
| RON#2813 | [GitHub](https://github.com/ronchang8215/react-daily-task-router/blob/main/src/App.js) |
| 無名#6427 | [Github](https://github.com/NoName135/Day-13-React-Router-/blob/main/src/App.js) |
| Evonne#7078 | [Github](https://github.com/hsuifang/react-daily-task-router/blob/main/src/App.js) |
| Midnightdinner#6220 | [GitHub](https://github.com/WOOWOOYONG/react-daily-task-router/blob/main/src/App.js) |
| ZengZeng | [GitHub](https://github.com/yokozeng/react-daily-task-router/blob/main/src/App.js) |
| Bumble幫啵 | [GitHub](https://github.com/nick1092387456/react-daily-task-router/blob/main/src/App.js) |
| easton#3863 | [Github](https://github.com/easton7906/react-daily-task-router/blob/main/src/App.js) |
| Stanley#2505 | [GitHub](https://github.com/TsaiMingDa/react-daily-task-router/tree/main/src) |
| Neal#0665 | [Github](https://github.com/NealLKF/react-daily-task-router/blob/main/src/App.js) |
| wiimax#4564 | [Github](https://github.com/willismax/react-daily-task-router/blob/main/src/App.js) |
| Mr.Sean#3825 | [Github](https://github.com/seanhong1215/react-daily-task-router/blob/Day14/src/App.js) |
| Ryder#7398 | [Github](https://github.com/rider159159/react-daily-task-router/blob/main/src/App.js) |
| 城堡#2126 | [GitHub](https://github.com/tthcastle/react-daily-task-router/blob/4f69fb841d43a7657cb0e84d6da0adaa87992ff9/src/App.js) |
| Shau#6400 | [GitHub](https://github.com/b97390022/react-daily-task-router/blob/48e0030d700283902f3657b8f558c9802acb7bf6/src/App.js) |
| Kenge#3690 | [GitHub](https://github.com/pgkusn/react-daily-task-router/blob/main/src/App.js) |
| IceSam#7836 | [GitHub](https://github.com/I-chun/react-daily-task-router/blob/main/src/App.js) |
| Timothy#5863 | [GitHub](https://github.com/timothy-hippo/react-daily-task-router/blob/main/src/App.js) |
| wenyun#2362 | [GitHub](https://github.com/wen1011/hexschoolReact/blob/LV1/my-app/src/App.js) |
| aka 南港鮪杰大食怪 | [github](https://github.com/weiyi-li00/react-daily-task-router/blob/main/src/App.js) |
| Yiling#4054 | [GitHub](https://github.com/linlindon/react-daily-task-router/blob/main/src/App.js) |
| EvaLin#4546 | [GitHub](https://github.com/Evalin0316/react-daily-task-router/blob/main/src/App.js) |
| hiYifang #0736 | [GitHub](https://github.com/hiYifang/react-daily-task-router/blob/main/src/App.js) |
| huch09#1426 | [Github](https://github.com/subarashii-huch09/react-daily-task-router/blob/main/src/App.js) |
| kimi#2092 | [GitHub](https://github.com/a3216lucy/react-daily-task-router/blob/day2/src/App.js) |
| Claire#2116 | [GitHub](https://github.com/clairechang0609/react-daily-task-router/blob/main/src/App.js) |
| CofCat#9226 | [GitHub](https://github.com/CofCat456/react-daily-task-router/blob/main/src/App.js) |
| Kelvin#3296 | [GitHub](https://github.com/BaBaSwan/hexschool-React-Day13-react-daily-task-router/blob/1c2c89da73fa7e88d5e8c865f1273f87f842af8c/src/App.js) |
| Rocker#6235 | [GitHub](https://github.com/Rockeryo/react-daily-task-router-main/blob/master/src/App.js) |
| JarDar#6980 | [github](https://github.com/jardar/react-router-practice/blob/main/src/App.js) |
| Mitour#0672 | [Github](https://github.com/mitour/react-daily-task-router/blob/main/src/App.js) |
| IreneLee#7932 | [Github](https://github.com/IreneLee18/react-daily-task-router/blob/main/src/App.js) |
|彼得#1923|[GitHub](https://github.com/aloysse/react-daily-task-router/blob/main/src/App.js)|
|kancheng#3915|[GitHub](https://github.com/kancheng/React-2022-Router-Day14/blob/main/src/App.js),[Codepen](https://codepen.io/kancheng/pen/abYMBpy)|
|Chelly#6129|[GitHub](https://github.com/chelly-hsu/react-daily-task-router/blob/main/src/App.js)|
|TedWang|[GitHub](https://github.com/TedWang06/react-daily-task-router/blob/main/src/App.js)|
|minmin#8960|[githubAPPjs](https://github.com/chenminfan/hexschool_react-daily-task-router/blob/main/src/App.js)|
|hahaalin#3209 |[GitHub](https://github.com/hexschool/react-daily-task-router/commit/23524c6d491605132a1160ca24fbc4112467a422)|
|翔#0859 |[GitHub](https://github.com/ben0588/React_day13/blob/main/day13/src/App.js)|
|yoshidc#0455 |[GitHub](https://github.com/yoshiyyc/react-daily-task-router/blob/main/src/App.js)|
|charlottelee849#0366 |[GitHub](https://github.com/char849/react-daily-task-router/blob/main/src/App.js)|
|Ada |[GitHub](https://github.com/ada0104/react-daily-task-router/blob/55b85854d376ca83bb221aafa6f9d3a92c191020/src/App.js)|
|hobby#6565 |[GitHub](https://github.com/hobbyling/react-daily-task-router/blob/day14/src/App.js#L23-L27)|
|eching#9183 |[GitHub](https://github.com/17eching/react-daily-task-router/blob/main/src/App.js)|
| NinaKuo#3332 |[GitHub](https://github.com/tina272763/react-daily-task-router/blob/main/src/App.js)|
| Li-Ninja#0471 |[GitHub](https://github.com/Li-Ninja/react-daily-task-router/commit/f9fb6d9bc2dd3fae8a8128248408b287f8ef5ce0)|
|JimHwang#3594 |[GitHub](https://github.com/JIMHWANG/React_Router_PracticeTodo/blob/main/src/App.js)|
| JASONlU |[GitHub](https://github.com/jasonlu0525/ReactRouter01/blob/main/src/App.js)|
| 許揚民 Evan#4546 |[GitHub](https://github.com/gitevanhsu/react-daily-task-router/blob/main/src/App.js)|
|Eshiunm|[GitHub](https://github.com/Eshiunm/react-daily-task-router-main-2/blob/main/src/App.js)|