react-router-dom和react-router的区别

react-router-dom和react-router的区别

前言

在使用react-router-dom的时候，经常会和react-router搞混了，搞不清楚它们哪个跟哪，到底有什么关系，今天来总结一下。

结论

1. react-router-dom是在react-router的基础上开发的，react-router-dom中很多组件都是直接从react-dom中直接导出的。所以安装了react-router-dom后就不用再安装react-router；
2. 在react-router的基础上，额外提供了BrowserRouter、HashRouter、Link、NavLink组件，可以用于路由跳转。其中BrowserRouter、HashRouter用于替代react-router中的Router组件；Link、NavLink的作用类似于a标签；
3. 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组件的作用