imooc-manager筆記（二）

home 頁面

1. home頁面佈局

   頁面佈局：

   水平居中：text-align:center
   垂直居中：因爲高度是使用calc計算的，所以不容易指定，所以推薦使用flex佈局
   

   flex佈局：

   水平居中：justify-content: center;
   垂直居中：align-items: center;
   

   使用Css開發箭頭圖標

   使用圖片的大小
   
   &:after{}僞類的使用
   

   參考：http://www.runoob.com/css/css-pseudo-classes.html

---

React-Router 4.0

1. react-router4.0 基本概念

   • react-router

     4.0 只包含基本的路由，base包，包括Router，Route，Switch等

     4.0 路由不需要配置，一切皆組件，不需要單獨抽取出一份路由配置

   • react-router-dom

     瀏覽器端的路由，包含base包

     BrowserRouter，HashRouter，Route，Link，NavLink，Switch等

   • react-router-dom 核心用法

     • HashRouter和BrowserRouter的區別

        **HashRouter**
       http://localhost:8080/#/home  
        **BrowserRouter**
       http://localhost:8080/home
       

     • Route：path、exact、component、render
       

     • NavLink、Link
       

       定義路由<Route path="/three/:number"/>,取值this.props.match.params.number
       

       Link中to還可以是一個對象

       {pathname:"",search:"",state:{},key:"",hash:""}
       

       在目標頁面獲取this.props.location.***

     • Swith
       

     • Redirect

   官網：https://reacttraining.com/react-router/web/guides/quick-start

   參考：https://react-guide.github.io/react-router-cn/index.html

2. react-router Demo

3. 項目路由實戰

   • 分析頁面之間的關係

     主頁、登錄頁、訂單詳情等是平級關係

     主頁和內容頁之間是嵌套的關係

     所以在根路由中不能加入主頁面，App組件