React教程(十四) : React-router 實現原理


之前講述了React-router的使用方法,這一篇講述其實現原理
1:react-router的Link組件會被翻譯為a標簽,

其query、to、hash等屬性都會被翻譯為href屬性

2:通過history.listen監聽路由變化
以下源碼可以在react-router.js中找到

3:matchPath方法從url中的path找出對應的組件path

4:最后,如果使用的是Switch組件,其內部會遍歷Switch中的子組件(都是Route對象),調用matchPath方法匹配組件,找到能匹配上path屬性的Route組件,並clone其child對象。

以上源碼可以在node_modules\react-router\esm\react-router.js中找到


免責聲明!

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



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