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