接下來 3 天的 React Router 練習，請 fork 這個專案來練習。
[專案 GitHub 連結](https://github.com/hexschool/2023-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/en/6.15.0/start/faq#how-do-i-add-a-no-match-404-route-in-react-router-v6)

## 題目
請撰寫 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 / 答案 |
|:-:|:--------------:|:-------------------------------------------------------------------:|
| 01 |collinkao|[GitHub](https://github.com/collin0825/2023-react-daily-task-router/blob/main/src/App.jsx)|
| 02 |chichi|[GitHub](https://github.com/chichihuang93076/2023-react-daily-task-homework/blob/main/src/App.jsx)|
| 03 | AYA | [CodeSandBox](https://codesandbox.io/p/github/study-hex/2023-react-daily-task-router/feature/day16) |
| 04 |smalljie|[GitHub](https://github.com/smalljie373/202308ReactRouter/blob/main/src/App.jsx)|
| 05 |羅羅|[GitHub](https://github.com/bjqs02/2023-react-daily-task-router/blob/5772bc6aba3790ef9d0d9151a8ad51916a629000/src/App.jsx)|
| 06 | stevenchang421 | [Github](https://github.com/steven4program/react-daily-task-router/blob/main/src/App.jsx) |
| 07 | David0799 | [Github](https://github.com/David07994415/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 08 | Aden | [Github](https://github.com/spikesandmaen484/20230828ReactRouter/blob/main/src/App.jsx) |
| 09 | cataska | [GitHub](https://github.com/cataska/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 10 | LinaChen | [GitHub](https://github.com/Lina-SHU/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 11 | Wendy3 | [GitHub](https://github.com/Wendy03/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 12 | Billy.Ji | [GitHub](https://github.com/yaj55billy/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 13 | 地球儀 | [GitHub](https://github.com/dayday1222/2023-react-daily-task-router)|
| 14 | 王偉青 | [GitHub](https://github.com/lovegull2/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 15 | 變羊魔法 | [GitHub](https://github.com/cssf998811/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 16 | yuchih | [GitHub](https://github.com/hijachu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 17 | Yen | [GitHub](https://github.com/tzuhuangyen/React-router) |
| 18 | JJ Wu | [GitHub](https://github.com/jesswu1551/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 19 | jasperlu005 | [Github](https://github.com/ja5perlu/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 20 | 黃士桓 | [codeSandbox](https://codesandbox.io/p/github/huan5678/2023-react-daily-task-router/main) |
| 21 | curry | [codeSandbox](https://codesandbox.io/p/sandbox/white-cookies-8lkwxn?file=/src/App.css:16,22) |
| 22 | Kaya | [Github](https://github.com/Laron9486/2023-react-daily-task-router/blob/54a8ad84a6d8e3fbed93799396c1011f8c86b9db/src/App.jsx) |
| 23 | ejchuang | [Github](https://github.com/ejchuang/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 24 | Wei_Rio | [Github](https://github.com/wei-1539/React-16dayWork/blob/main/src/App.jsx) |
| 25 | Leo | [Github](https://github.com/Aruminiya/Day16_ReactRouterBuild/blob/main/src/App.jsx) |
| 26 | davidchengtw | [GitHub](https://github.com/davidchengtw/2023-react-daily-task-router-vite/blob/main/src/App.jsx) |
| 27 | Ataraxia | [GitHub](https://github.com/QuantumParrot/2023-Hexschool-React-Workshop-Daily-Task-Router/blob/main/src/App.jsx) |
| 28 | Sui | [Codesandbox](https://codesandbox.io/s/react-ru-men-gong-zuo-fang-zuo-ye-lian-xi-m2d22m?file=/src/App.js) |
| 29 | rainnping | [GitHub](https://github.com/ok0204q/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 30 | 金魚 | [GitHub](https://github.com/CSO-TW-GoldFish/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 31 | 瑀君 | [GitHub](https://github.com/yanennnnn/2023-react-daily-task-router/blob/01bff592784c7646d442028b223f9716c2265589/src/App.jsx) |
| 32 | 精靈 | [GitHub](https://github.com/sky030b/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 33 | Iris | [GitHub](https://github.com/iris831206/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 34 | SkyWoW | [GitHub](https://github.com/stanley878787/react-daily/blob/main/react-daily-day16/src/App.jsx) |
| 35 | Ingrid | [GitHub](https://github.com/Ingrid-chi/2023_react_daily_task_router/blob/main/src/App.jsx) |
| 36 | Cami | [GitHub](https://github.com/fayevivi/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 37 | jiun7523 | [GitHub](https://github.com/jiunjiun69/2023-react-daily-task-router/blob/main/src/App.jsx) |
| 38 | PollyPO_Lee | [GitHub](https://github.com/pollyPO1986/2023-react-daily-task-router/blob/feature/day16-homework/src/App.jsx) |

- 快速複製

| 00 | user | [GitHub]() |