---
tags: 2022 React 新手讀書會
---
# 第三週：react router

### 學習資源
1. [Git、GitHub 教學手冊(學到 分支)](https://w3c.hexschool.com/git/cfdbd310)
2. [NPM 教學](https://courses.hexschool.com/courses/202011122/lectures/33636919?preview=logged_in)

### **[create-react-app](https://github.com/facebook/create-react-app) 安裝流程**

1. 安裝 [Node](https://nodejs.org/en/)
* Node >= 14.0.0npm >= 5.6
2. 新增資料夾，並透過終端機移動過去
3. 專案名稱：`<my-react-app>`

// react 環境
npx create-react-app my-app




cd my-app


// react router
npm install react-router-dom@6


npm start

> npm 永久安裝，npx 安裝後即移除
> npx 指令必須在 npm 5.2+ 才有
> 用 npm -v 測試是否有在 npm 5.6+ 安裝門檻

## 操作步驟

- [x] 安裝環境
- [x] 安裝 react-router-dom@6
- [x] index.js、App.js [環境設置](https://reactrouter.com/docs/en/v6/getting-started/installation)
- [x] 嘗試 import 拉出來成獨立檔案，放在 components 資料夾
- [x] 設置 404 找不到
- [x] 調整成 [hashRouter](https://reactrouter.com/docs/en/v6/routers/hash-router)，GitHub 專用
- [x] 部署到 GitHub pages
:::spoiler [部署流程](https://create-react-app.dev/docs/deployment/#github-pages)
0. 安裝 gh-pages 套件，`npm install --save gh-pages`
1. 開 GitHub Repo
2. 在資料夾連接你本地 repo，`git remote add origin https://github.com/{你的帳號名稱}/repo 名稱}.git`
3. 在 package.json 加上以下內容

{

"homepage": "https://{你的帳號名稱}.github.io/{repo 名稱}"

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "predeploy": "npm run build",
   "deploy": "gh-pages -d build"
  }
}

4. 執行 `npm run deploy`
:::

## 路由表詳細設定

1. `useNavigate`([連結](https://reactrouter.com/docs/en/v6/hooks/use-navigate)) 與 `Link`([連結](https://reactrouter.com/docs/en/v6/components/link)) 轉址差異
2. 巢狀路由(變更局部元件)：[Layout 設計](https://reactrouter.com/docs/en/v6/getting-started/overview#index-routes)，`<outlet />`
* [前後台 Layout 拆開](https://stackoverflow.com/questions/71420106/how-to-separate-header-and-footer-of-homepage-from-displaying-in-admin-page-in-r)

### 範例 Code
* [旅遊網資訊](https://github.com/gonsakon/reactrouter2/tree/main)
* [React Router 範例結構](https://reactrouter.com/docs/en/v6/getting-started/concepts#review)
:::spoiler

:::