---
tags: N108 Component
---
# Pageswitch.jsx
- component 切換流程圖

digraph Pageswitch {
                nodesep=0.8
                node [color=orange, fontsize=22, shape=box, style=bold]
                edge [color=RosyBrown, style=dashed]
                Pageswitch->{Home Account Learn Exam Watch}
                Watch->{Note}
                Exam->{Detail}
}

## import 資料
| 名稱 | 類型 | 描述 | 來源 |
| :------ | :----------- | :----------- | :-- |
| Route, Switch, Redirect |<font color='RosyBrown'>external component</font> | Route | react-router-dom |
| Working | <font color='BlueViolet'>component</font> | 修理中畫面 | tool/Working.jsx |
| Learn | <font color='BlueViolet'>component</font> | 學習中心畫面 | learn/Learn.jsx |
| Exam | <font color='BlueViolet'>component</font> | 評測中心畫面 | exam/Exam.jsx |
| ExamWrapper | <font color='BlueViolet'>component</font> | 考試畫面 | exam/ExamWrapper.jsx |
| Info | <font color='BlueViolet'>component</font> | 個人資料畫面 |account/MemberProfile.jsx|
| Watch | <font color='BlueViolet'>component</font> | 圖片 ID 轉換成路徑 |watch/Video.jsx|
| APPbar | <font color='BlueViolet'>component</font> | Topbar |topbar/APPbar.jsx|
| queryString | <font color='Green'>function</font> | query-string 擷取函數 | query-string |

## constructor 介紹
### state 參數介紹
| 名稱 | 類型 | 描述 | defalut |
| :------ | :----------- | :----------- | :-- |
| `hide_sidebar` | <font color='blue'>bool</font> | sidebar 參數，true 為隱藏 sidebar；false 為顯示 sidebar| false |

## 獨立 function
| 名稱 | 描述 | async 是否 |
|:--|:--|:--|
|click_sidebar()|hide_sidebar = !this.state.hide_sidebar|否|

## render
### props (上層傳入) 參數介紹
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `login`| <font color='blue'>bool</font> | 登入參數，true 為登入中；false 為沒登入(訪客) |
| `info` | <font color='Gold'>json value</font> | API 傳入的個人 ID、名稱、SSO來源、Type|
| `getuserimg` | <font color='green'>function</font> | Login function，為了**render APP.jsx**，因此接收 |
| `userimg` | <font color='orange'>string</font> | API 傳入的頭貼路徑 |
### 額外參數
| 名稱 | 類型 | 描述 |
| :------ | :----------- | :----------- |
| `schoolname` | <font color='orange'>string</font> | 學校類型，由 queryString 抓取|
### return
- 此 component 為路徑轉換區，可以想成 APP 功能轉換區
- 分為兩個
- 上方為 APPbar(topbar) ➡️ [Appbar.jsx](https://hackmd.io/bwh5hAgBRcehZs086FJidg)
- 
- 下方為 Switch
- 首頁 <font color='orange'>{`/Home`}</font> ➡️ [Home.jsx](https://hackmd.io/Gwv7gVPXTwqCJdxbDUxPVQ?view)
- 修理中 <font color='orange'>{`/Work`}</font> ➡️ [其他](https://hackmd.io/kcqQiKkhTRauHjs7rj-a3w?view)
- 會員中心 <font color='orange'>{`/Member`}</font> ➡️ [MemberProfile.jsx](https://hackmd.io/_F5o4DuORuuuyeXsJI7XSw?view)
- 學習中心 <font color='orange'>{`/Learn_app`}</font> ➡️ [Learn.jsx](https://hackmd.io/mVPmz7vPRa-Cr7jS9cj_Qg?view)
- 評測中心 <font color='orange'>{`/Exam_app`}</font> ➡️ [Exam.jsx](https://hackmd.io/0K39dZY9Rbq7xwPFKNzDUw?view)
- 考試中 <font color='orange'>{`/Exam_wrapper`} </font> ➡️ [ExamWrapper.jsx](https://hackmd.io/JqzV6luhSsCA3CPCxtt_sg?view)

- 觀看影片中 <font color='orange'>{`/watch`}</font> ➡️
- *請把 watch 改成 Watch*
- **APP.JSX 中的 {`/`} 將導引到 {`/Home`}**
- footer 已改寫到 [Home.jsx](https://hackmd.io/Gwv7gVPXTwqCJdxbDUxPVQ?view)