今天開始react一個重要部分的xiao~習，路由~（過程截圖，最后附代碼）
以下代碼只能騙糊塗蛋子，沒錯，就是我自己，不要打算讓我敲出多高級的東西~
理論性知識幾乎沒有，請不要打算讓我給你說原理啥的，原理性的東西，網上很多，我現在搬磚學習很開心，勿忘初心~
（1）首先，你確定你安裝了react環境，這第一步難度系數1，菜鳥級別的不演示了
（2）接下來，你要是用react路由，需要安裝路由插件
1 npm install react-router-dom --save-dev //這里可以使用cnpm代替npm命令
這一步安裝，你的選擇很多，我是用的 vs code的終端安裝的，因為不想開小窗口，嫌煩
安裝成功。
（3）因為不知道我們要用到些什么，於是我就引入了很多組件。
這里我去搜索了一下模塊和組件的區別，為什么叫引入組件而不是模塊
組件是具體的：按照一些小功能的通用性和可復用性來抽象組件
組件化更多的關注UI部分，比如用戶看到的彈出框，頁腳，確認按鈕等，這些組件可以組合成新的組件，又可以和其他組件組合組合成新的組件
模塊是抽象的：按照項目業務划分的大模塊
模塊化側重於數據的封裝，一組相關的組件定義成一個模塊，一個json對象可以是一個模塊。
這里只談區別，因為用詞的精確性問題，程序員應該有一種對邏輯和正確性 ‘咬文嚼字’ 的態度。
引入了不少的東西。。。我后面會給你解釋每一個的，你先引進去。
（4）我新建了兩個兒子（子文件son1和son2）在newDemo文件夾中。
我區分了他們呢，並把他們拋出。
（5）父組件引入拋出的son1和son2
運行環境，瀏覽器中打開顯示是這樣的：
圖中顯示了父組件的"我是個React"和引入的兩個子組件的“大兒子“和”二兒子”。
黃色部分的警告：不影響砸門使用，提醒砸門引入了但是沒有用的組件和模塊。
（6）上面的操作只是證明引入沒問題。。。哈哈哈嗝~
這是一個規規矩矩的局部路由，（友情踩坑提示，link標簽的首字母記得大寫）
Router大標簽，套住Link和Route，注釋呢，已經在圖片上給你寫出來了，在網頁上，他是這個樣子的：
右邊的警告是不是少了？額，不喜歡就注釋了嘛先。而你點擊跳轉是這樣的：
（7）現在呢我們，說一下我們為什么用哈西路由（HasRouter）而不是瀏覽器路由（BrowserRouter）。
（Router是我們起的別名 as 的作用就是這個啦。）
首先說一下哈西路由（HashRouter）和瀏覽器路由（BrowserRouter）:
以下解釋的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 號后面的 url。
假如有一個 Link 標簽，點擊后跳轉到 /abc/def。
BrowserRouter： http://localhost:8080/abc/def HashRouter： http://localhost:8080/#/abc/def
如果有服務器端的動態支持，建議使用 BrowserRouter，否則建議使用 HashRouter。
原因在於，如果是單純的靜態文件，假如路徑從 / 切換到 /a 后，此時刷新頁面，頁面將無法正常訪問。
因為寫服務器文件還比較麻煩，因此在之后的 DEMO 中，我們將主要使用 HashRouter 而不是 BrowserRouter。
線上項目和實際網站是不會出現#的，所以用的是 BrowserRouter。
（8）現在呢，我就把BrowserRouter刪掉了，Link換成NavLink
說一說Link和NavLink的區別：
<NavLink>是<Link>的一個特定版本，會在匹配上當前的url的時候給已經渲染的元素添加參數，組件的屬性有
。activeClassName(string)：設置選中樣式，默認值為active
。activeStyle(object)：當元素被選中時，為此元素添加樣式
。exact(bool)：為true時，只有當導致和完全匹配class和style才會應用
。strict(bool)：為true時，在確定為位置是否與當前URL匹配時，將考慮位置pathname后的斜線
。isActive(func)判斷鏈接是否激活的額外邏輯的功能
好吧，我攤牌了https://blog.csdn.net/lhjuejiang/article/details/80366839 鏈接給你！
看這里，我把to后面直接跟了一個路徑，也是沒問題的。
（9）把son2也引進去，
現在我要試一試NavLink的選中樣式了
雖然只是一個簡單的樣式的使用，可見其優化后用起來還是很不錯的。
（10）重定向的使用Redirect
重定向，我覺得吧，分兩種常用的情況。
1》進入界面你需要默認一個網址，或者默認一個局部，就是我現在的情況，直接定義到son3，但是沒有son3這個模塊，所以啥也不顯示，但是你可以定義到其它界面
2》匹配沒有那個界面的時候，轉到一個404界面或者其它界面，這個比較常見，符合實際產品的開發。
(11)Switch的使用
有<Switch>標簽，則其中的<Route>在路徑相同的情況下，只匹配第一個，這個可以避免重復匹配；
我其他地方沒有動，只改了路徑，我們看效果。
只出現了一個大兒子。
如果沒有Switch呢？
大兒子二兒子都蹦躂出來了。。。
（12）exact的用處，嚴格匹配！
看標紅線的地方，然后看界面顯示，這個時候沒有用exact，我們進入 '/son1/son2' 時，兩個組件都會加載出來。
現在我們給第一個son1加上exact！
看界面！
只加載了一個二兒子！
（13）新人的總結感言。
東西不算多，但是一個一個截圖查資料，真的受益無窮，會和熟悉，對於新開發一個功能，可能區別不大，因為我們都會在網上查大量的資料，去完善，去對比，但是對於搬磚期間，熟悉可以更有效地搬磚，節約時間，從而提高效率，抽出時間去學習！