石家庄定制网站建设服务,郑州app网站开发,小程序开发价目表,自己做的网站怎么被搜索出来react-router-dom和react-router的区别
前言
在使用react-router-dom的时候#xff0c;经常会和react-router搞混了#xff0c;搞不清楚它们哪个跟哪#xff0c;到底有什么关系#xff0c;今天来总结一下。
结论
react-router-dom是在react-router的基础上开发的#…react-router-dom和react-router的区别
前言
在使用react-router-dom的时候经常会和react-router搞混了搞不清楚它们哪个跟哪到底有什么关系今天来总结一下。
结论
react-router-dom是在react-router的基础上开发的react-router-dom中很多组件都是直接从react-dom中直接导出的。所以安装了react-router-dom后就不用再安装react-router在react-router的基础上额外提供了BrowserRouter、HashRouter、Link、NavLink组件可以用于路由跳转。其中BrowserRouter、HashRouter用于替代react-router中的Router组件Link、NavLink的作用类似于a标签BrowserRouter和HashRouter BrowserRouter是history模式路由路由长这样http://abc.com/xxx是通过浏览器的history.pushState和history.popState实现可能会有一定兼容性低版本的浏览器不支持比如ie部署到服务器上需要进行一定的配置具体要配置什么这里不做讨论HashRouter是hash模式路由路由长这样http://abc.com#/xxx浏览器通过监听hashchange来改变路由的兼容性良好
在react-router-dom的modules源码中可以看到这些区别
Switch组件使用的问题
Switch组件会按照Route的书写顺序匹配只找到第一个被匹配到的Route就立即停止继续匹配并且把它渲染出来。
那么问题来了我用exact不就可以了为啥还需要用Switch呢? 不Switch组件而直接使用Route组件exact也可以做到Switch组件类似的效果。但是使用这种方法就算匹配到了路由它不会停止继续匹配而是继续往后找造成性能浪费。
参考资料 1、react-router区别 2、switch组件的作用
