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 i react-router-dom --save,安裝了淘寶鏡像的就用cnpm吧。

React-router-dom的核心用法

HashRouter和BrowserRouter

它們兩個是路由的基本,就像蓋房子必須有地基一樣,我們需要將它們包裹在最外層,我們只要選擇其一就可以了。現在講它們的不同:

HashRouter

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

這就是HashRouter的使用情況。下面是對應的代碼。

ReactDOM.render(
    <HashRouter>
        <Router path="/" component={home}></Route>
    </HashRouter>
),document.getElementById('root'));

BrowserRouter

很多情況下我們則不是這種情況,我們不需要這個#,因為它看起來很怪,這時我們就需要用到BrowserRouter。

它的原理是使用HTML5 history API (pushState, replaceState, popState)來使你的內容隨著url動態改變的,如果是個強迫症或者項目需要就選擇BrowserRouter吧。下面我們將主要結合它來講解。 這裡講一個它們的基礎api,basename。如果你的文件放在服務器的二級目錄下則可以使用它。

ReactDOM.render(
    <BrowserRouter>
        <Router path="/calendar" component={home}></Route>
    </BrowserRouter>
),document.getElementById('root'));

它的效果如,當你的主頁前面是有一級目錄calendar時,同樣會顯示主頁的內容。它常常配合Link使用。

Route

Route是路由的一個原材料,它是控制路徑對應顯示的組件。我們經常用的是exact、path以及component屬性。

<Route exact path="/" component={Home}></Route>
<Route path="/" component={Second}></Route>
<Route path="/" component={Third}></Route>

exact控制匹配到/路徑時不會再繼續向下匹配,path標識路由的路徑,component表示路徑對應顯示的組件。後面我們將結合NavLink完成一個很基本的路由使用。同時我們可以設置例如/second/:id的方式來控制頁面的顯示,這需要配合Link或者NavLink配合使用。下面我們會提到

Link和NavLink的選擇

兩者都是可以控制路由跳轉的,不同點是NavLink的api更多,更加滿足你的需求。

Link

主要api是to,to可以接受string或者一個object,來控制url。使用方法如下

<link to="/courses"/>
<link to={{
     pathname:'/course',
     search:'?sort=name',
     hash:'#the-hash',
     state:{fromDashboard:true}
}}/>

這時點擊Link就會跳轉到courses。

NavLink

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

ReactDOM.render(
    <BrowserRouter>
        <div>
            <div>
                <ul>
                    <li>
                        <NavLink exact activeClassName="selected" to="/">home</NavLink>
                    </li>
                    <li>
                        <NavLink activeClassName="selected" to="/second/1234">second</NavLink>
                    </li>
                    <li>
                        <NavLink activeClassName="selected" to="/third">third</NavLink>
                    </li>
                </ul>
            </div>
            <Route exact path="/" component={Home}></Route>
            <Route path="/second/:id" component={Second}></Route>
            <Route path="/third" component={Third}></Route>
        </div>
    </BrowserRouter>
),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简约教程

相關文章

Copyright © 2018 ucamc