React-router和React-router-dom的選擇
很多剛使用react的同學，在接觸到react-router的時候往往開始會比較無概念，都會很難進入狀況，什麼react-router和react-router-dom？下面我們就來一探究竟。
React-router
React-router提供了一些router的核心api，包括Router, Route, Switch等，但是它沒有提供dom操作進行跳轉的API。
React-router-dom
React-router-dom提供了BrowserRouter, Route, Link等API，我們可以通過dom的事件控制路由。
例如點擊一個按鈕進行跳轉，大多數情況下我們是這種情況，所以在開發過程中，我們更多是使用React-router-dom。
使用npm安裝如下:
npm i react-router-dom --saveReact-router-dom的核心用法
HashRouter和BrowserRouter
它們兩個是路由的基本，就像蓋房子必須有地基一樣，我們需要將它們包裹在最外層，我們只要選擇其一就可以了。現在講它們的不同：
HashRouter
如果你使用過react-router2或3或者vue-router，你經常會發現一個現象就是url中會有個#，例如localhost:3000/#，HashRouter就會出現這種情況，它是通過hash值來對路由進行控制。如果你使用HashRouter，你的路由就會默認有這個#。
這就是HashRouter的使用情況。下面是對應的代碼。
ReactDOM.render(
),document.getElementById('root'));BrowserRouter
很多情況下我們則不是這種情況，我們不需要這個#，因為它看起來很怪，這時我們就需要用到BrowserRouter。(但是此方式需要伺服器配合，以apache為例，.htaccess新增重寫規則。)
它的原理是使用HTML5 history API (pushState, replaceState, popState)來使你的內容隨著url動態改變的，如果是個強迫症或者項目需要就選擇BrowserRouter吧。下面我們將主要結合它來講解。
這裡講一個它們的基礎API。
ReactDOM.render(
),document.getElementById('root'));它的效果如，當你的主頁前面是有一級目錄calendar時，同樣會顯示主頁的內容。它常常配合Link使用。
Route
Route是路由的一個原材料，它是控制路徑對應顯示的組件。我們經常用的是exact、path以及component屬性。
exact控制匹配到/路徑時不會再繼續向下匹配，path標識路由的路徑，component表示路徑對應顯示的組件。後面我們將結合NavLink完成一個很基本的路由使用。同時我們可以設置例如/second/:id的方式來控制頁面的顯示，這需要配合Link或者NavLink配合使用。下面我們會提到
Link和NavLink的選擇
兩者都是可以控制路由跳轉的，不同點是NavLink的API更多，更加滿足你的需求。
Link
主要API是to，to可以接受string或者一個object，來控制url。使用方法如下
這時點擊Link就會跳轉到courses。
NavLink
它可以為當前選中的路由設置類名、樣式以及回調函數等。使用如下
ReactDOM.render(
-
home
-
second
-
third
),document.getElementById('root'));exact用於嚴格匹配，匹配到/則不會繼續向下匹配，to則是控制跳轉的路徑，activeClassName是選中狀態的類名，我們可以為其添加樣式。我們在/second後面添加1234來想路由中傳遞信息，這結合了上面Route中的/second/:id，結合使用了，下面是效果圖
線面的1234內容顯示需要用到match，我們馬上就來講一下。
match
match是在使用router之後被放入props中的一個屬性，在class創建的組件中我們需要通過this.props.match來獲取match之中的信息。match中包含的信息如下。
我們常常會獲取id進行使用
Switch
Switch常常會用來包裹Route，它裡面不能放其他元素，用來只顯示一個路由。
文章來源分享:React-router4简约教程