寫法上的區別:
寫法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';
react-router實現了路由的核心功能
react-router-dom
: 基于react-router
,加入了在瀏覽器運行環境下的一些功能,例如:Link
組件,會渲染一個a
標簽,Link組件源碼a
標簽行; BrowserRouter
和HashRouter
組件,前者使用pushState
和popState
事件構建路由,后者使用window.location.hash
和hashchange
事件構建路由。
從源碼層面來說明:
首先看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
組件,然后重新導出而已。
react-router-dom依賴react-router,
。基于瀏覽器環境的開發,只需要安裝react-router-dom;基于react-native環境的開發,只需要安裝react-router-native。
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。