# 第六週
本頁面連結：https://hackmd.io/Afkl1OKRQbyOGChTOqZZ_A

## 完課獎勵說明

完整獎勵說明：https://hackmd.io/ry4GF6KWROKbx9cLf51bkA

RPG 獎勵說明連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962886

- 2/16 前 50%：超過 100 人挑戰成功，全班直播加碼授權一年
- 前完成課程報到 -> 第四週主線
- 2/23 前 60%：框架菁英班直播 → 主題：Next.js 起步走
- 完成課程報到 -> 第五週主線 或 第六週主線 + 心得牆
- 3/9 前 80%：框架菁英班錄影(目前以 Vue 為主，React 可參考主題包含：從零建構 API、Cloud flare、前端工程師如何寫出好履歷)
- 完成課程報到 -> 第七週主線 或 第六週主線 + 心得牆
- 100%：數位完賽獎狀

目前第四週已經有 89 人完成，但請記得完成 “報到任務” 喔～

心得牆任務：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962881_12062543649513962910
心得牆素材：https://hackmd.io/OcMERTDpT86G-5PS8NDVjg

## 提醒：作業繳交說明

- 所有繳交期限 3/23
- **最終延長繳交條件**：3/23 前完整繳交（沒有被直接退件），可延長批改至 4/13
- 直接退件的原因：
- 助教下載後，`npm run dev` 無法運行
- 作品不完整（作品內容有缺、有大量假字）

### 環境變數：

https://cn.vite.dev/guide/api-environment-instances.html#using-environment-instances

1. 新增 .env 檔案
2. 加入變數，API 網址及 UUID

## Router

React Router 網站：https://reactrouter.com/home

### Component Router 與 plain object Router

React Router 具備兩種定義形式：https://reactrouter.com/6.28.1/start/overview#nested-routes

1. 使用 Component 定義
2. 使用 plain object 定義

目前兩種量使用在市場上差不多，不過 plain object 的寫法與其他框架撰寫方式相同，因此本次直播班將以 plain object 為主

### 版本

React Router 7 於 2024/11/24 推出，距離開課時間已過於接近，影音課程教材依然是以 React Router 6 為主。另外兩者寫法差異不大，許多觀念依然可以沿用

### 檔案結構與呈現的關係

### Router

- 路由需要準備什麼
- 路由表
- 頁面元件
- 渲染位置


## 開始定義你的路由

> Vite 一樣請先選擇 React，先不使用 React Router v7 的版本，從零認識 React Router

1. npm i react-router （v6 則是 react-router-dom，但兩者真的差異不大）
2. 建立兩個頁面，可以放在 `views` 或 `pages` 資料夾中
3. 建立路由表，可以放在 `src/routes/index.jsx`
- 範例結構：

    import Layout from '../App';
    import Home from '../views/Home';
    import About from '../views/About';

    const routes = [
      {
        path: '/',
        element: <Layout />,
        children: [
          {
            path: 'home',
            element: <Home />
          },
          {
            path: 'about',
            element: <About />
          }
        ]
      }
    ]

    export default routes;

4. 在 Layout 或 App 檔案中，加入 Outlet 元件
5. 回到 main.jsx

    import { createRoot } from 'react-dom/client'
    import { createHashRouter, RouterProvider } from 'react-router'
    import routes from './routes/index.jsx'
    const router = createHashRouter(routes)
    
    createRoot(document.getElementById('root')).render(
      <RouterProvider router={router} />,
    )

> 注意，在此使用的是 createHashRouter 而不是 createBrowserRouter，兩者運作上有所不同
6. 加入 Link 連結 多個頁面

#### 建立路由流程：

1. 建立新檔案
2. 撰寫路由表
3. 補上連結

複習：
- 路由結構配置 → 基本頁面結構配置
- 路由表：通常會在 src/routes/index.jsx
- 渲染位置，會在 <Outlet /> 元件之中
- 使用 Link 作為連結

## 延伸技法

1. 巢狀路由 → 巢狀連結
2. 動態路由 → 動態參數
1. 通常會用在動態結構中（不確定的內容）
3. 路由 Hooks
1. 動態方法
4. 預設連結、404
5. Link 樣式
1. https://reactrouter.com/6.28.1/components/nav-link

## 定義自己的路由配置

1. 請先定好完整路由架構
2. 將路由配置對應所有頁面，開發順序：
1. 先開頁面檔案
2. 撰寫路由配置
3. 補上 router-link
- 前端頁面
- 首頁 /
- 產品 /products → 產品列表
- 產品 /product/:id → 動態路由
- 購物車 /cart
- 登入頁面 /login
- **需驗證頁面：管理者端頁面** /admin/ —> 巢狀路由
- 產品 /products
- 訂單列表 /orders
- 優惠券... /coupons

# 練習題目：

1. 請問如何新增一個關於我們的頁面
1. 步驟一：新增一個檔案
2. 步驟二：新增路由表
3. 步驟三：加入連結
2. 請問如何新增一個後台的 Coupon 頁面
1. 步驟一：新增一個檔案
2. 步驟二：新增路由表
3. 步驟三：加入連結
3. 回顧，如何新增一個產品頁面，並透過網址帶上 ID
1. 步驟一：新增一個檔案
2. 步驟二：新增路由表，並加上 :id
3. 步驟三：加入連結
4. 步驟四：透過 useParams; 取得 id
4. 如何新增一個 Login 頁面
1. 步驟一：新增一個檔案
2. 步驟二：新增路由表
3. 步驟三：加入連結

## 本週額外挑戰

- 預習章節閱讀：[連結](https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962883_12062543649513962890)
- Redux 與 Redux Toolkit
- 作業連結：https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962871_12062543649513962892?tid=12062543649528575017
- 助教作業解說（週日上午 10:00）
- 團隊任務：
- https://rpg.hexschool.com/#/training/12062543649513962870/board/content/12062543649513962881_12062543649513962911