React學習（四）-React-Router路由使用

一.場景

　　單頁應用可以根據路由去加載不同元件，在react中，官方有一個Router元件可以讓我們做這個路由配置，實作不同路由去加載不同元件。

二.安裝

　　這裡選擇react-router的4.x以上的版本，必須要安裝react-router-dom。注意v4版本和之前的版本有較大差別。

三.引用Router

　　HashRouter是指用hash做辨別，就是url上的路由顯示在/#/後面。另外一種BroswerRouter是直接帶在url上。

　　Link是跳轉路由用的元件，可以了解為a标簽的元件。

四.配置路由

　　點選對應Link，就可以跳轉到對應元件。

五.包含式路由和exact關鍵字

　　和之前router版本不同的是，寫入path後，之前版本是完全比對的。而v4版本是會有包含關系，比如url輸入"/tab2"，那麼就會比對到path為"/"和path為"/tab2"的路由，同時将這些渲染出來。是以，v4版本多了個exact關鍵字，表示隻對目前路由進行比對。

六.獨立路由：switch

　　使用Switch元件，可以使路由隻有一個被比對到，并且總是渲染第一個比對到的路由。

七.嵌套路由

　　在v3版本中，嵌套路由是統一在路由元件中作嵌套配置的。

　　但在v4版本中，這種寫法會出現warn警告，不再允許這種寫法。需要在該路由下的component裡嵌套路由。

　　完整代碼如下。

　　App.jsx

　　Home.jsx

　　Tab1.jsx

　　Tab2.jsx

　　Tab3.jsx

　　Message.jsx