react-router與react-router-dom使用時的區別

1、React-router與React-router-dom的API對比

React-router：提供了router的核心api。如Router、Route、Switch等，但沒有提供有關dom操作進行路由跳轉的ap；

React-router-dom：提供了BrowserRouter、Route、Link等api，可以通過dom操作觸發事件控制路由。

 

 2、React-router與React-router-dom的功能對比

React-router：實現了路由的核心功能

React-router-dom：基於React-router，加入了一些在瀏覽器運行下的一些功能，

　　例如：Link組件會渲染一個a標簽，

　　　　   BrowserRouter使用 HTML5 提供的 history API可以保證你的 UI 界面和 URL 保持同步，

　　　　   HashRouter使用 URL 的 hash 部分保證你的 UI 界面和 URL 保持同步

 

 3、React-router與React-router-dom的寫法對比

React-router不能通過操作dom控制路由，此時還需引入React-router-dom

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

React-router-dom在React-router的基礎上擴展了可操作dom的api

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

 

 4、React-router與React-router-dom的路由跳轉對比

React-router：router4.0以上版本用this.props.history.push('/path')實現跳轉；

　　　　　　　router3.0以上版本用this.props.router.push('/path')實現跳轉

React-router-dom：直接用this.props.history.push('/path')就可以實現跳轉

 

總結：

　　在使用React的大多數情況下，我們會想要通過操作dom來控制路由，例如點擊一個按鈕完成跳轉，這種時候使用React-router-dom就比較方便。

　　安裝也很簡單：npm install   react-router-dom --save 

　　從react-router-dom中package.json的依賴就可以看出：react-router-dom是依賴react-router的，所以我們使用npm安裝react-router-dom的時候，不需要npm安裝react-router。

//react-router-dom的依賴
"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" }

 

 

-ＴＨＥ　ＥＮＤ-