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 --save
React-router-dom的核心用法
HashRouter和BrowserRouter
它們兩個是路由的基本,就像蓋房子必須有地基一樣,我們需要將它們包裹在最外層,我們只要選擇其一就可以了。現在講它們的不同:
HashRouter
如果你使用過react-router2或3或者vue-router,你經常會發現一個現象就是url中會有個#,例如localhost:3000/#,HashRouter
就會出現這種情況,它是通過hash值來對路由進行控制。如果你使用HashRouter
,你的路由就會默認有這個#。

這就是HashRouter的使用情況。下面是對應的代碼。
ReactDOM.render(
<HashRouter>
<Route path="/" component={home}></Route>
</HashRouter>
),document.getElementById('root'));