今天開始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 的作用就是這個啦。）

首先說一下哈西路由（HasRouter）和瀏覽器路由（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。

（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）新人的總結感言。

東西不算多，但是一個一個截圖查資料，真的受益無窮，會和熟悉，對於新開發一個功能，可能區別不大，因為我們都會在網上查大量的資料，去完善，去對比，但是對於搬磚期間，熟悉可以更有效地搬磚，節約時間，從而提高效率，抽出時間去學習！

&n