React-router路由的簡約介紹

 

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。

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本，就像蓋房子必須有地基同樣，咱們須要將它們包裹在最外層，咱們只要選擇其一就能夠了。如今講它們的不一樣：

HashRouter

若是你使用過react-router2或3或者vue-router，你常常會發現一個現象就是url中會有個#，例如localhost:3000/#，HashRouter就會出現這種狀況，它是經過hash值來對路由進行控制。若是你使用HashRouter，你的路由就會默認有這個#。

 

BrowserRouter

不少狀況下咱們則不是這種狀況，咱們不須要這個#，由於它看起來很怪，這時咱們就須要用到BrowserRouter。

它的原理是使用HTML5 history API (pushState, replaceState, popState)來使你的內容隨着url動態改變的， 若是是個強迫症或者項目須要就選擇BrowserRouter.。
這裏講一個它們的基礎api，basename。若是你的文件放在服務器的二級目錄下則可使用它。

 

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

它能夠爲當前選中的路由設置類名、樣式以及回調函數等。使用以下

exact用於嚴格匹配，匹配到/則不會繼續向下匹配，to則是控制跳轉的路徑，activeClassName是選中狀態的類名，咱們能夠爲其添加樣式。咱們在/second後面添加1234來想路由中傳遞信息，這結合了上面Route中的/second/:id，結合使用了

線面的1234內容顯示須要用到match

 

match

match是在使用router以後被放入props中的一個屬性，在class建立的組件中咱們須要經過this.props.match來獲取match之中的信息。match中包含的信息以下。

咱們經常會獲取id進行使用

Switch

Switch經常會用來包裹Route，它裏面不能放其餘元素，用來只顯示一個路由。