個人一個react路由之旅（步驟及詳圖）

時間 2020-02-10

標籤個人一個 react 路由之旅步驟詳圖欄目 React 简体版

原文原文鏈接

今天開始react一個重要部分的xiao~習，路由~（過程截圖，最後附代碼）react

如下代碼只能騙糊塗蛋子，沒錯，就是我本身，不要打算讓我敲出多高級的東西~程序員

理論性知識幾乎沒有，請不要打算讓我給你說原理啥的，原理性的東西，網上不少，我如今搬磚學習很開心，勿忘初心~npm

（1）首先，你肯定你安裝了react環境，這第一步難度係數1，菜鳥級別的不演示了json

（2）接下來，你要是用react路由，須要安裝路由插件瀏覽器

1 npm install react-router-dom --save-dev //這裏可使用cnpm代替npm命令

這一步安裝，你的選擇不少，我是用的 vs code的終端安裝的，由於不想開小窗口，嫌煩服務器

安裝成功。react-router

（3）由於不知道咱們要用到些什麼，因而我就引入了不少組件。dom

這裏我去搜索了一下模塊和組件的區別，爲何叫引入組件而不是模塊模塊化

組件是具體的：按照一些小功能的通用性和可複用性來抽象組件
組件化更多的關注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)判斷連接是否激活的額外邏輯的功能

好吧，我攤牌了http://www.javashuo.com/article/p-zwmrmzqk-dn.html 連接給你！

看這裏，我把to後面直接跟了一個路徑，也是沒問題的。

（9）把son2也引進去，

如今我要試一試NavLink的選中樣式了

雖然只是一個簡單的樣式的使用，可見其優化後用起來仍是很不錯的。

（10）重定向的使用Redirect

重定向，我以爲吧，分兩種經常使用的狀況。

1》進入界面你須要默認一個網址，或者默認一個局部，就是我如今的狀況，直接定義到son3，可是沒有son3這個模塊，因此啥也不顯示，可是你能夠定義到其它界面

2》匹配沒有那個界面的時候，轉到一個404界面或者其它界面，這個比較常見，符合實際產品的開發。

(11)Switch的使用

有<Switch>標籤，則其中的<Route>在路徑相同的狀況下，只匹配第一個，這個能夠避免重複匹配；

我其餘地方沒有動，只改了路徑，咱們看效果。