--- # (E)尊絕不凡 React 教學 ## - 第三週 --- week3 - [本次上課專案](https://github.com/explooosion/react-tutorial/tree/master/week3) --- ### 今天の學習目標 - ㄧ、 Router 路由 - 二、 登入頁面 --- # ㄧ、React Router --- ### ㄧ、React Router  --- ### ㄧ、React Router [Github](https://github.com/ReactTraining/react-router) 導讀文件：[quick-start](https://reacttraining.com/react-router/web/guides/quick-start) --- ### ㄧ、React Router ```bash= npm install -g create-react-app create-react-app demo-app cd demo-app ``` ```bash= npm install react-router-dom # or yarn add react-router-dom ``` --- ### ㄧ、React Router 組件：[Route](https://reacttraining.com/react-router/web/guides/quick-start) - path: 匹配路徑 - exact: 完全匹配 - component: 掛載的組件 - render: 渲染組件, 與 component 不太一樣 --- ### ㄧ、React Router 組件：[Redirect](https://reacttraining.com/react-router/web/api/Redirect) 用於轉址路由，預設使用 replace。 to: 轉址到指定路由 push: 改使用堆疊方式， --- ### ㄧ、React Router 在 props 裡面有：[history](https://reacttraining.com/react-router/web/api/history) location - 取得當前路徑 push - 推送當前頁面 goBack - 返回前一個索引 --- ### ㄧ、HUNTER × 試卷A 1. 安安！幫我寫公司網站。 2. 網站首頁顯示文字： ＯＯ公司。 3. 另外我要「後台管理」頁面。 4. 首頁有個是否登入的狀態。 5. 如果沒有登入 false，則「後台管理」轉址回到首頁。 --- ### ㄧ、HUNTER × 試卷B 1. 安安！幫我寫公司網站。 2. 網站首頁顯示文字： ＯＯ公司。 3. 另外我要「登入頁面」，包含帳號,密碼。 4. 如果有登入，首頁顯示： Hi！ {帳號}。 --- ### ＊.學習統整 1. 可以根據不同頁面，製作出路由。 2. 我會在路由組件中使用 render 傳入 state。 3. 我會使用轉址。 --- # END