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組件,使用pushStatepopState事件構建路由;

          HashRouter組件,使用window.location.hashhashchange事件構建路由。

          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來跳轉:  

    

 

 返回上級頁面使用:

    

 

 

 

 

 

 

     
 

 


    

    

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM