react-router與react-router-dom區別

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

import { Swtich, Route, BrowserRouter, HashHistory, Link } from 'react-router-dom';
複製代碼

一、api方面

React-router：

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

React-router-dom：

提供了BrowserRouter、Route、Link等api，能夠經過dom操做觸發事件控制路由。

Link組件，會渲染一個a標籤；BrowserRouter和HashRouter組件，前者使用pushState和popState事件構建路由，後者使用 hash 和 hashchange 事件構建路由。

二、動態路由跳轉

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-router-dom在react-router的基礎上擴展了可操做dom的api。

Swtich 和 Route 都是從react-router中導入了相應的組件並從新導出，沒作什麼特殊處理。

react-router-dom中package.json依賴中存在對react-router的依賴，故此，不須要npm安裝react-router。

• 可直接 npm 安裝 react-router-dom，使用其api。