# 第四週：React Router 與 Todo 實戰

- 請務必提醒講師 “錄影”
- 作品參考：https://works.hexschool.io/#/
- 近期活動：
- JS 工程師養成直播班：https://www.hexschool.com/courses/js-training.html
- iThome 鐵人賽：https://ithelp.ithome.com.tw/2023ironman/event
- Vue 作品實戰班，開放預約中：https://www.hexschool.com/courses/vue-training.html

分享美句：
- 投資：什麼事情都可以讓別人做，唯有交易日記必須要親力親為
- 延伸：什麼事情都可以委託他人，但學習記錄必須要親力親為

## React 工作坊同學專屬優惠

<p style="color: red">⏳限時優惠：即日起至 9/3 (日) </p>

- 前端全組合、JS 組合課：**75 折，再折 200 元**
- React、Vue、JS 課程：**75 折，再折 50 元**
- JavaScript 工程師養成直播班：**限時 47 折**

優惠連結：https://hex.school/fDOpw

## 主要介紹

- 路由
- 實作技巧
- 跨元件方法管理（Cookie 方法）
- 頁面切換

## 路由方法

- 什麼是路由
- 加入前端路由

### 初始化路由

1. `npm i react-router-dom` 安裝 React Router DOM 套件
2. 開啟 `main.js` 匯入 `HashRouter` 並加入到 App 的外層

**HashRouter 與 BrowserRouter 說明：**
1. **`BrowserRouter`**: 這是一種現代化的路由方式，利用 HTML5 的 history API (pushState, replaceState 和 popstate 事件) 來保持 UI 與 URL 的同步。它給予你機會擁有乾淨的 URL，例如 **`https://mywebsite.com/about`**，但需要在伺服器端進行適當設定，因為當用戶直接訪問 **`https://mywebsite.com/about`** 或刷新此頁面時，伺服器必須能夠正確回應。
2. **`HashRouter`**: 這是一種為了向後相容和處理不支援 HTML5 history API 的瀏覽器而生的路由方式。這種路由方式使用 URL 的 hash 部分 (即 **`#`** 和後面的部分) 來進行 UI 與 URL 的同步。這種方式的好處在於，不需要任何伺服器端的配置就可以正確處理路由，但 URL 通常會比較雜亂，例如 **`https://mywebsite.com/#/about`**。

> 如果有能力自行設定伺服器，BrowserRouter 是首選。反之，建議使用 HashRouter 解決伺服器問題。
>

import { HashRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HashRouter>
      <App />
    </HashRouter>
  </React.StrictMode>,
)

3. 在 App.jsx 匯入 Routes, Route 開始撰寫路由

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';

function App() {
  return (
    <div>
      <Routes>
        <Route path='/' element={<Home />} />
      </Routes>
    </div>
  );
}

### 路由加入技巧

1. 建立元件
2. 匯入元件並撰寫路由表
3. 加入連結

### 常見路由方法 / 類型

類型：
- 一般路由
- 導覽連結（Navlink 與 {isActive}）
- 巢狀路由
- NotFound Page

// 請放在最後面
<Route path="*" element={<NotFound />}></Route>

方法（Hooks）：
- useNavigate

## Todos

課程 API 文件：https://todolist-api.hexschool.io/doc/#/

### 環境變數

- 文件：https://cn.vitejs.dev/guide/env-and-mode.html

**流程：**

1. 建立 .env 檔案
2. 建立環境變數，名稱以 `VITE_APP` 開頭，例如 `VITE_APP_SITE`
3. 重啟服務並回到檔案，取得環境變數，即可取得該值

const { VITE_APP_SITE } = import.meta.env;

### Cookie 操作

- 文件：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie#examples

**寫入 Cookie**

document.cookie = "test2=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure";
document.cookie = "test2=true;"

**取得 Cookie**

const cookieValue = document.cookie
  .split("; ")
  .find((row) => row.startsWith("test2="))
  ?.split("=")[1];

### Axios 預設 Header

文件：https://axios-http.com/docs/config_defaults

## 最終任務：

- 設計稿：https://www.figma.com/file/pFivfS3rDX3N3u3dN9aIlx/TodoList?node-id=0%3A1
- CSS 範例：https://codepen.io/liao/pen/mdpmXKg?editors=1010

最終證書作業繳交截止日：9/10 23:59（日）
- 同時挑戰證書任務：
- 最終任務繳交 API 版：<a href="https://rpg.hexschool.com/training/37/task?type=detail&id=357" target="_top">React & API 整合證書任務</a>
- 最終任務繳交普通版：<a href="https://rpg.hexschool.com/training/37/task?type=detail&id=356" target="_top">React 證書任務</a>