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

葛景山 發表於 2019-7-29 16:55:00

RR4 本次采用单代码仓库模型架构（monorepo），这意味者这个仓库里面有若干相互独立的包，分别是：
<ul>
<li><code>react-router</code> React Router 核心</li>
<li><code>react-router-dom</code> 用于 DOM 绑定的 React Router</li>
<li><code>react-router-native</code> 用于 React Native 的 React Router</li>
<li><code>react-router-redux</code> React Router 和 Redux 的集成</li>
<li><code>react-router-config</code> 静态路由配置的小助手</li>
</ul>
<h1>引用</h1>
<h4>react-router 还是 react-router-dom？</h4>
在 React 的使用中，我们一般要引入两个包，<code>react</code> 和 <code>react-dom</code>，那么 <code>react-router</code> 和<code>react-router-dom</code> 是不是两个都要引用呢？ 非也，坑就在这里。他们两个只要引用一个就行了，不同之处就是后者比前者多出了 <code><Link></code> <code><BrowserRouter></code> 这样的 DOM 类组件。 因此我们只需引用 <code>react-router-dom</code> 这个包就行了。当然，如果搭配 redux ，你还需要使用 <code>react-router-redux</code>。
 
<code>react-router-v4</code>，我称之为“第四代react-router”，<code>react-router</code>和<code>react-router-dom</code>的区别是什么呢？
为什么有时候我们看到如下的写法：
写法1:
<div class="highlight highlight-source-js">
<pre>import {Swtich, Route, Router, HashHistory, Link} from 'react-router-dom';</pre>
</div>
写法2:
<div class="highlight highlight-source-js">
<pre>import {Switch, Route, Router} from 'react-router';
import {HashHistory, Link} from 'react-router-dom';</pre>
</div>
先简单说下各自的功能：
<code>react-router</code>: 实现了路由的核心功能 <code>react-router-dom</code>: 基于<code>react-router</code>，加入了在浏览器运行环境下的一些功能，例如：<code>Link</code>组件，会渲染一个<code>a</code>标签，Link组件源码<code>a</code>标签行; <code>BrowserRouter</code>和<code>HashRouter</code>组件，前者使用<code>pushState</code>和<code>popState</code>事件构建路由，后者使用<code>window.location.hash</code>和<code>hashchange</code>事件构建路由。
<code>react-router-native</code>: 基于<code>react-router</code>，类似<code>react-router-dom</code>，加入了<code>react-native</code>运行环境下的一些功能。
从源码层面来说明：
首先看<code>react-router-dom</code>中的<code>Switch</code>组件的源码
<div class="highlight highlight-source-js">
<pre>// Written in this round about way for babel-transform-imports
import { Switch } from 'react-router'
export default Switch</pre>
</div>
只是从<code>react-router</code>中导入<code>Switch</code>组件，然后重新导出而已。
查看其他模块的源码， <code>Route</code>组件的源码 <code>Router</code>组件的源码 ...
和<code>Swtich</code>一样，都是从<code>react-router</code>中导入了相应的组件，重新导出而已，并没有对实现做什么特殊处理。
结论：
<ol>
<li><code>react-router-dom</code>依赖<code>react-router</code>，所以我们使用<code>npm</code>安装依赖的时候，只需要安装相应环境下的库即可，不用再显式安装<code>react-router</code>。</li>
<li>基于浏览器环境的开发，只需要安装<code>react-router-dom</code>；基于<code>react-native</code>环境的开发，只需要安装<code>react-router-native</code>。</li>
<li><code>npm</code>会自动解析<code>react-router-dom</code>包中<code>package.json</code>的依赖并安装。</li>

</ol>
<code>react-router-dom</code>中<code>package.json</code>依赖:
<div class="highlight highlight-source-json">
<pre>"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"
}</pre>
</div>
安装了<code>react-router-dom</code>，<code>npm</code>会解析并安装上述依赖包。可以看到，其中包括<code>react-router</code>。
<ol start="2">
<li>所以，回到最开始的写法。基于浏览器环境的开发，写法1就可以了。</li>
</ol> 
来源：https://www.cnblogs.com/laneyfu/p/11264923.html

頁: [1]

琼殿技术论坛's Archiver

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