---
tags: 2022 React 新手讀書會
---
# 🏅 Day 13 ｜React Router 建立
接下來 3 天的 React Router 練習，請 fork 這個專案來練習。
[專案 GitHub 連結](https://github.com/hexschool/react-daily-task-router)

### React Router 介紹
React Router 提供元件和 Hook，可以直接使用它來進行頁面路由的開發。
以下介紹基本常用的元件：
1. `<NavLink>`：和我們常見的 ``<a href="#"></a>`` 的作用是類似的，但會處理掉預設行為，並導向對應的路由。而在 React Router 中 `<NavLink>` 與 `<Link>` 都是連結功能，不一樣的地方在於當這個 NavLink 與目前的 URL 符合時，會自動加上 active class。
舉例：

<NavLink to="/about">
    <p>關於我們</p>
</NavLink>

2. `<Route>`：設置相對應的路徑。當路徑符合目前的 URL，則會渲染指定的 元件。例如：

<Route path="/about" element={<About />} /> 

3. `<Routes>`： `<Route>` 必須使用`<Routes>` 來包住 ，每當 URL 更改時，`<Routes>` 會查找所有children，並找到對應的 `<Route>` 設定來顯示要出現的元件。
例如：

<Routes>
  <Route path="/about" element={<About />} /> 
<Routes>

4.`<BrowserRouter>` or `<HashRouter>`：通常會用在最外層，讓包在裡面的 Child Component 可以使用路由。
- HashRouter: 頁面路徑最前面會有個「#」，例如： `/#/about`。這代表路由會由前端進行模擬，像是部署在 GitHub Pages 上就建議採用此模式。
- BrowserRouter: 頁面路徑不會有井字，例如： `/about`。路由會需要後端協助處理，否則在 refresh 後就會出現 404，因為實際上 build 出來是沒有 about.html（只有 index.html）

### 補充
有時候我們輸入一些不存在的路由，會看到 404 Not Found 的頁面，這邊在 Router 設定也可以做到唷

<Route
  path="*"
  element={
    <main style={{ padding: "1rem" }}>
      <p>There's nothing here!</p>
    </main>
  }
/>

透過 `*` 的設置，當輸入的路由不符合任何已存在的路由，就會出現對應的 element。

[No Match Route 文件](https://reactrouter.com/docs/en/v6/getting-started/tutorial#adding-a-no-match-route)

## 題目
請撰寫 Routes, Route 的部分，建立 register（註冊）, login（登入）, todo（待辦事項） 三個頁面路由，讓上方的 Nav 選單可切換到各頁面。

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

<!-- 解答：

<Routes>
  <Route path="/register" element={<Register />} />
  <Route path="/login" element={<Login />} />
  <Route path="/todo" element={<Todo />} />
</Routes>

-->

回報區
---

| Discord | GitHub / 答案 |
|:---------------:|:----------------------------------------------------------------------------------------------------------------------:|
| Rice#8043 | [GitHub](https://github.com/riceball-tw/React-Router-Day13/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) |
| 布魯諾#7239 | [GitHub](https://github.com/Bruno-Yu/react-daily-task-router/blob/90fc8a6721d2c0a4153a4da73ca707b670c0f581/src/App.js) |
| aki | [GitHub](https://github.com/aki168/react-router-test/blob/main/src/App.js) |
| Ayre#0016 | [GitHub](https://github.com/not8311/react-daily-task-router/blob/main/src/App.js) |
| Mr.Sean#3825 | [GitHub](https://github.com/seanhong1215/react-daily-task-router/blob/dev/src/App.js) |
| huch09#1426 | [Github](https://github.com/subarashii-huch09/react-daily-task-router/blob/main/src/App.js) |
| Kenge#3690 | [Github](https://github.com/pgkusn/react-daily-task-router/blob/main/src/App.js) |
| 黃士桓#7654 | [GitHub](https://github.com/huan5678/react-daily-task-router) |
| Mitour#0672 | [Github](https://github.com/mitour/react-daily-task-router/blob/main/src/App.js) |
| Kimi#2092 |[GitHub](https://github.com/a3216lucy/react-daily-task-router/blob/day1/src/App.js) | |
| Timothy#5863 |[GitHub](https://github.com/timothy-hippo/react-daily-task-router/blob/main/src/App.js) |
| VadaChen#2055|[GitHub](https://github.com/astrolexa/reactDaily13_Router/blob/main/src/App.js)|
| Bumble幫啵#0255|[GitHub](https://github.com/nick1092387456/react-daily-task-router/blob/main/src/App.js)|
|JC#8658|[GitHub](https://github.com/jcsamoyed/react-daily-task-router/blob/main/src/App.js)
| L0F0#8733|[GitHub](https://github.com/LOOFOO/react-router-day13/blob/main/src/App.js)|
| yuyu#6310 |[GitHub](https://github.com/yuyu0905/react-daily-task-router)|
| SHIN#6075 |[GitHub](https://github.com/Shin9626/react-daily-task-router/blob/8bb6ba3bc194759e0587464b4f111a4ee9ad2685/src/App.js)|
| 山貓(焜)#7041 |[GitHub](https://github.com/Nopeta/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) |
|Yanyan#3555|[GitHub](https://github.com/Yangunli/react-router/blob/main/src/App.js)|
|hiYifang #0736|[GitHub](https://github.com/hiYifang/react-daily-task-router)|
|𝓛𝓊𝒸𝓎#8635|[GitHub](https://github.com/lucy70381/react-daily-task-router)|
|Carolkiki2003#7399|[GitHub](https://github.com/carolkiki2003/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)|
| Dylan_Lin#7320 | [GitHub](https://github.com/k06132001/React-Router-Dom/blob/main/src/App.js)|
| Yiling#4054 | [GitHub](https://github.com/linlindon/react-daily-task-router/blob/main/src/App.js)|
| rainbow#3329 | [GitHub](https://github.com/superRainbow/react-daily-task-router/blob/main/src/App.js)|
| 葉秋#2335 | [GitHub](https://github.com/as880074/react-daily-task-router/blob/main/src/App.js)|
| 威爾#1694 | [GitHub](https://github.com/letcla0624/react-daily-task-router/blob/main/src/App.js) |
| 無名#6427 | [GitHub](https://github.com/NoName135/Day-13-React-Router-/blob/main/src/App.js) |
|aka 鮪杰小寶貝我婆|[github](https://github.com/weiyi-li00/react-daily-task-router/blob/main/src/App.js)|
| RON#2813 | [GitHub](https://github.com/ronchang8215/react-daily-task-router/blob/main/src/App.js) |
| Evonne#7078 | [GitHub](https://github.com/hsuifang/react-daily-task-router/blob/main/src/App.js) |
| JarDar#6980 |[codepen](https://github.com/jardar/react-router-practice/blob/main/src/App.js)|
| Mao#5230 |[codepen](https://github.com/TaoDoris/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)|
|easton#3863|[Github](https://github.com/easton7906/react-daily-task-router/blob/main/src/App.js)|
|kancheng#3915|[GitHub](https://github.com/kancheng/react-dev-hex/blob/main/src/App.js),[Codepen](https://codepen.io/kancheng/pen/eYMbOaP)|
|wiimax#4564| [GitHub](https://github.com/willismax/react-daily-task-router/blob/main/src/App.js)
|Ryder#7398| [GitHub](https://github.com/rider159159/react-daily-task-router/blob/main/src/App.js)|
|Joechiboo#3960| [GitHub](https://github.com/joechiboo/react-daily-task-router/blob/main/src/App.js)|
|Anson#3594| [GitHub](https://github.com/huanmingchang/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)|
|JessSong#5050| [GitHub](https://github.com/jssanji03/react-daily-task-router/blob/main/src/App.js)|
|HedgehogKU|[GitHub](https://github.com/HedgehogKUCC/react-daily-task-router/commit/bf7691f86998b5c81fd3c2076e0976a21978d9d5)|
|wenyun#2362|[GitHub](https://github.com/wen1011/hexschoolReact/blob/LV1/my-app/src/App.js)|
|LinaChen#1796|[GitHub](https://github.com/Lina-SHU/React_Router_Task/blob/master/src/App.js)|
|Robert Lo#9653|[GitHub](https://github.com/Robert0629/hexschool-react-router-day13/blob/main/src/App.js)|
| hw#0715 | [Github](https://github.com/Lhwei/react-daily-task-router/blob/main/src/App.js)|
| ZengZeng | [Github](https://github.com/yokozeng/react-daily-task-router/blob/main/src/App.js)|
| Neal#0665 | [Github](https://github.com/NealLKF/react-daily-task-router/blob/main/src/App.js)|
| Claire#2116 | [Github](https://github.com/clairechang0609/react-daily-task-router/blob/main/src/App.js)|
| 城堡#2126 | [GitHub](https://github.com/tthcastle/react-daily-task-router/blob/ba0a17b178a52931f74f7f6c67f8a4adfe6cdb07/src/App.js) |
| Shau#6400 | [GitHub](https://github.com/b97390022/react-daily-task-router/blob/3015bf97ef622dfef26df07bbcae0a75552963d7/src/App.js) |
|彼得#1923|[GitHub](https://github.com/aloysse/react-daily-task-router/blob/main/src/App.js)
|shin#5792|[GitHub](https://github.com/shin1030/react-daily-task-router/blob/main/src/App.js)
|翔#0859|[GitHub](https://github.com/ben0588/React_day13/blob/main/day13/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/551f1032a24722eb7af185b970d4bec34bad0d84/src/App.js)
|Rocker#6235|[GitHub](https://github.com/Rockeryo/react-daily-task-router-main/blob/master/src/App.js)
|ねこ*#9385|[GitHup](https://github.com/neko0104/react-daily-task-router/blob/main/src/App.js)|
|lingxuan|[GitHub](https://github.com/lingxuan0618/react-daily-task-router/blob/main/src/App.js)|
|Chelly#6129|[GitHub](https://github.com/chelly-hsu/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)|
|TedWang|[GitHub](https://github.com/TedWang06/react-daily-task-router/blob/main/src/App.js)|
|minmin#8960|[github](https://github.com/chenminfan/hexschool_react-daily-task-router)|
|真．穎旻粉撕#4995|[Github](https://github.com/aa910113/react-daily-task-router/blob/main/src/App.js)|
|hahaalin#3209 |[GitHub](https://github.com/hexschool/react-daily-task-router/commit/725212f05ec9e6aa8f261b987487cfa9ba8a6dd3#diff-3d74dddefb6e35fbffe3c76ec0712d5c416352d9449e2fcc8210a9dee57dff67)|
|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/78d06a0e3899b80817ddac048728d7afc7bd67f3/src/App.js)|
|hobby#6565 |[GitHub](https://github.com/hobbyling/react-daily-task-router/blob/day13/src/App.js#L40-L44)|
|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/blob/main/src/App.js)|
| JASONlU |[GitHub](https://github.com/jasonlu0525/ReactRouter01/blob/main/src/App.js)|
| JimHwang#3594 |[GitHub](https://github.com/JIMHWANG/React_Router_PracticeTodo/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/blob/main/src/App.js)|