react-router-dom vs react-router

发表于 | 分类于 ，
字数统计: 290 | 阅读时长 ≈ 1

react-router-dom vs react-router

React Router V4 相对 V2/V3 几乎完全重写了，遵循 Just Component 的 API 设计理念

react-router V4 分成了三个包：react-router-dom(for web)、react-router-native(for #native)、react-router(core)

也就是说，react-router-dom 是在 react-router 基础上添加了一些在浏览器环境下的特定功能，如 Link、BrowserRouter 、HashRouter 等

BrowserRouter：通过 pushState 和 replaceState 构建路由
HashRouter：通过 location.hash 和 hashchange 构建路由

通过 npm 安装 react-router-dom 时发现其依赖 react-router，也就是说不需要显示安装 react-router

1
2
3
4
5
6
// 写法 1
import { Swtich, Route, Router, HashHistory, Link } from 'react-router-dom';

// 写法 2
import { Switch, Route, Router } from 'react-router';
import { HashHistory, Link } from 'react-router-dom';

对上面两种写法做个简单的分析，两种写法唯一的区别在于 Switch、Route 及 Router 的导入源不一致。
通过查看源码，发现在 react-router-dom 中 Switch、Route 及 Router 都是从 react-router 中导入了相应的组件，然后重新导出而已，并没有特殊的处理逻辑。
因此两种写法其实效果一样，写法 1 更简洁些。

参考