眾所周知，目前單頁(yè)面使用的路由有兩種實(shí)現(xiàn)方式：

　　· hash 模式

　　· history 模式

　　hash 模式

　　路由原理：

　　我們先來(lái)看hash模式，頁(yè)面首次加載時(shí)需要在load事件中解析初始的URL，從而展示進(jìn)入的頁(yè)面。當(dāng) # 后面的哈希值發(fā)生變化時(shí)，不會(huì)向服務(wù)器請(qǐng)求數(shù)據(jù)，可以通過(guò) hashchange 事件來(lái)監(jiān)聽(tīng)到 URL 的變化，從而進(jìn)行跳轉(zhuǎn)頁(yè)面。

　　react代碼實(shí)現(xiàn)：

　　1、使用react腳手架構(gòu)建一個(gè)react的項(xiàng)目：

　　>npx creact-react-app my-app

　　2、創(chuàng)建兩個(gè)組件 home.js 、 setting.js，使用hash路由來(lái)實(shí)現(xiàn)兩個(gè)組件的切換。

　　項(xiàng)目目錄如下：

　　3、在App.js文件中，我們需要實(shí)現(xiàn)如下的效果：

　　整個(gè)結(jié)構(gòu)使用Router組件包裹，由Route組件承載每一項(xiàng)路由的組件，由Link標(biāo)簽實(shí)現(xiàn)切換。那么我們來(lái)看一下router內(nèi)部如何實(shí)現(xiàn)的。

　　4、先來(lái)看一下router文件夾的結(jié)構(gòu)：

　　組件Router，Route，Link在router/Route.js,router/Route.js,route/Link.js三個(gè)文件中實(shí)現(xiàn)。router/index.js將三個(gè)組件集成方便外部調(diào)用。來(lái)看一下index.js的內(nèi)容：

　　5、整個(gè)路由項(xiàng)目被Router標(biāo)簽包裹，實(shí)際上需要達(dá)到共享路由當(dāng)前地址的目的，借助react中的 context 來(lái)實(shí)現(xiàn)。同時(shí)Router組件需要在項(xiàng)目首次加載時(shí)解析當(dāng)前的hash值，并且監(jiān)聽(tīng)hash值的變化，根據(jù)hash值，來(lái)通知 children 當(dāng)前的路由地址。代碼如下：

　　6、Route組件是根據(jù)當(dāng)前的hash地址判斷當(dāng)前的Route承載的組件是否應(yīng)該顯示，代碼如下：

　　注：如果需要實(shí)現(xiàn)路由嵌套和動(dòng)態(tài)路由，當(dāng)前的hash地址和組件配置的地址比較就不是使用===判斷這么簡(jiǎn)單了，在這里我不做陳述，感興趣的話可以自己研究一下。

　　7、Link組件只需要觸發(fā)hash路由的切換。代碼如下：

　　8、最后，我們來(lái)看一下顯示效果：

　　更多關(guān)于“前端培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。

　　注：本文部分文字和圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!