React：react-router-dom 詳解

使用react構建單頁面應用：

　　實現方法：（1）react-router

　　　　　　　（2）react-router-dom

react-router: 實現了路由的核心功能，而react-router-dom依賴react-router，

react-router-dom: 基於react-router，加入了在瀏覽器運行環境下的一些功能：

　　　　　　　　　　Link組件，會渲染一個a標籤；

　　　　　　　　　　BrowserRouter組件，使用pushState和popState事件構建路由；

　　　　　　　　　　HashRouter組件，使用window.location.hash和hashchange事件構建路由。

　　　　　　　　　　react-router-native: 基於react-router，相似react-router-dom，加入了react-native運行環境下的一些功能。

react-router-dom路由詳解:

　　　　靜態路由:

　　　　　　　　　　

 

 

 而後咱們在index.js中引入路由組件進行渲染：

　　　　　　　　　　

 

 

 咱們可使用a標籤或Link組件進行路由的跳轉，Link從react-router-dom引入；

　　　　　　　          

　　動態路由傳參：

　　　　第一種：在組件的路由後面加/：id；

　　　　

　　　　　而後咱們在對應組件Detail中修改代碼來進行獲取ID：

　　　　　

　　　第二種：

　　　　隱式傳參（經過函數跳轉）：

　　　　　　

 

 　　　　

 

 重複使用push或a標籤跳轉會產生死循環，爲了不這種狀況出現，react-router-dom提供了replace。在可能會出現死循環的地方使用replace來跳轉：　　

　　　　

 

 返回上級頁面使用：