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

[mrdulin]

react-router v4，我称之为“第四代react-router”，react-router和react-router-dom的区别是什么呢？

为什么有时候我们看到如下的写法：

写法1:

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

写法2:

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

先简单说下各自的功能：

react-router: 实现了路由的核心功能
react-router-dom: 基于react-router，加入了在浏览器运行环境下的一些功能，例如：Link组件，会渲染一个a标签，Link组件源码a标签行; BrowserRouter和HashRouter 组件，前者使用pushState和popState事件构建路由，后者使用window.location.hash和hashchange事件构建路由。

react-router-native: 基于react-router，类似react-router-dom，加入了react-native运行环境下的一些功能。

从源码层面来说明：

首先看react-router-dom中的Switch组件的源码

"use strict";
require("./warnAboutDeprecatedCJSRequire")("Switch");
module.exports = require("./index.js").Switch;

只是从react-router中导入Switch组件，然后重新导出而已。

查看其他模块的源码，
Route组件的源码
Router组件的源码
...

和Switch一样，都是从react-router中导入了相应的组件，重新导出而已，并没有对实现做什么特殊处理。

结论：

1. react-router-dom依赖react-router，所以我们使用npm安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装react-router。基于浏览器环境的开发，只需要安装react-router-dom；基于react-native环境的开发，只需要安装react-router-native。npm会自动解析react-router-dom包中package.json的依赖并安装。

react-router-dom中package.json依赖:

"dependencies": {
    "history": "^4.7.2",
    "invariant": "^2.2.2",
    "loose-envify": "^1.3.1",
    "prop-types": "^15.5.4",
    "react-router": "^4.2.0",
    "warning": "^3.0.0"
  }

安装了react-router-dom，npm会解析并安装上述依赖包。可以看到，其中包括react-router。

2. 所以，回到最开始的写法。基于浏览器环境的开发，写法1就可以了。

参考链接:

remix-run/react-router#4648
https://github.com/ReactTraining/react-router/blob/master/packages/react-router/README.md

[BYChoo]

受教了

[ClarenceC]

分析得很清楚学习了

[hollownewman]

我也正尝试作用

[wcodingw]

清清楚楚、明明白白，喜欢这样的文字。

[niceboybao]

thx

[sidlu-company]

感谢作者

[frontsomni]

thx

[songning0605]

写得很清楚，谢谢

[stackwar]

thx

[rainykane]

受教了

[YangQii]

thx

[wild-lily]

thx

[Shunqiang]

thx

[kangenpingmai]

little sun

[Zeus-Iqd]

分析明白

[ghostcode]

清楚明了

[gdmec07150725]

阿里戈多

[7neves]

十分感谢，简洁明了

[HelloJavaWorld123]

我一个java开发表示看懂了

[changchangge]

受教了

[tianyazjq]

么么哒

[Chuyue0]

3q

[Wangjinqian]

谢了，解决了困惑

[orient-i]

3q

[TimRChen]

统计来访者的插件数据很有趣，US第一...想半天才反应过来是VPN，妙啊