Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
mrdulin opened this issue Dec 11, 2017 · 15 comments

Comments

@mrdulin
Copy link
Owner

commented Dec 11, 2017

react-router v4,我称之为“第四代react-router”,react-routerreact-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标签行; BrowserRouterHashRouter 组件,前者使用pushStatepopState事件构建路由,后者使用window.location.hashhashchange事件构建路由。

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

从源码层面来说明:

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

// Written in this round about way for babel-transform-imports
import { Switch } from 'react-router'
export default 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-nativenpm会自动解析react-router-dom包中package.json的依赖并安装。

react-router-dompackage.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-domnpm会解析并安装上述依赖包。可以看到,其中包括react-router

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

参考链接:

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

Flag Counter

@BYChoo

This comment has been minimized.

Copy link

commented Feb 27, 2018

受教了

@ClarenceC

This comment has been minimized.

Copy link

commented Apr 12, 2018

分析得很清楚学习了

@hollownewman

This comment has been minimized.

Copy link

commented Jun 4, 2018

我也正尝试作用

@wcodingw

This comment has been minimized.

Copy link

commented Jun 16, 2018

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

@niceboybao

This comment has been minimized.

Copy link

commented Sep 10, 2018

thx

@sidlu-company

This comment has been minimized.

Copy link

commented Nov 24, 2018

感谢作者

@yuelau

This comment has been minimized.

Copy link

commented Nov 25, 2018

thx

@songning0605

This comment has been minimized.

Copy link

commented Dec 15, 2018

写得很清楚,谢谢

@webhongdada

This comment has been minimized.

Copy link

commented Dec 20, 2018

thx

@kanekilua

This comment has been minimized.

Copy link

commented Feb 20, 2019

受教了

@YangQii

This comment has been minimized.

Copy link

commented Mar 4, 2019

thx

2 similar comments
@yinhexidashuaibi

This comment has been minimized.

Copy link

commented Mar 26, 2019

thx

@Shunqiang

This comment has been minimized.

Copy link

commented Apr 11, 2019

thx

@kangenpingmai

This comment has been minimized.

Copy link

commented May 17, 2019

little sun

@Zeus-Iqd

This comment has been minimized.

Copy link

commented Jul 4, 2019

分析明白

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
You can’t perform that action at this time.