React中的路由系統(tǒng)

提起路由，首先想到的就是 ASPNET MVC 里面的路由系統(tǒng)--通過(guò)事先定義一組路由規(guī)則，程序運(yùn)行時(shí)就能自動(dòng)根據(jù)我們輸入的URL來(lái)返回相對(duì)應(yīng)的頁(yè)面。前端中的路由與之類似，前端中的路由是根據(jù)你定義的路由規(guī)則來(lái)渲染不同的頁(yè)面/組件，同時(shí)也會(huì)更新地址欄的URL。本篇文章要介紹的是React中經(jīng)常使用到的路由，react-router主要使用HTML5的history API來(lái)同步你的UI和URL。

react-router的最新版本是v4.1.1，由于4.0版本和之間的版本API變化較大，所以本篇文章的內(nèi)容并不能應(yīng)用到之前的版本中。

要注意 react-router 有 react-router-dom 和 react-router-native 的區(qū)別。前者是用于開發(fā)WEB應(yīng)用的，而后者適用于移動(dòng)APP的，本文所介紹的是react-router-dom。

react-router 中的三大組件

react-router中的組件就是react中的組件，只不過(guò)它們被添加了一些特殊的邏輯而已。

Router Router相當(dāng)于一個(gè)容器，不會(huì)被渲染出來(lái)。你的其他組件都要放在Router中才能使用到react-router的功能。根據(jù)功能的不同，Router還分為BrowserRouter，MemoryRouter等。

pnk pnk被渲染稱一個(gè)a標(biāo)簽，通常以聲明式的方式被定義在應(yīng)用程序中。

Route Route包含一個(gè)path，并指明了在path與URL匹配時(shí)要渲染的組件。

Router

如果說(shuō)我們的應(yīng)用程序是一座小城的話，那么Route就是一座座帶有門牌號(hào)的建筑物，而pnk就代表了到某個(gè)建筑物的路線。有了路線和目的地，那么就缺一位老司機(jī)了，沒(méi)錯(cuò)Router就是這個(gè)老司機(jī)。

先來(lái)說(shuō)一說(shuō)BrowserRouter。BrowserRouter主要使用在瀏覽器中，也就是WEB應(yīng)用中(廢話，看名字就知道了)。它利用HTML5 的history API來(lái)同步URL和UI的變化。當(dāng)我們點(diǎn)擊了程序中的一個(gè)鏈接之后,BrowserRouter就會(huì)找出與這個(gè)URL匹配的Route，并將他們渲染出來(lái)。 既然BrowserRouter是用來(lái)管理我們的組件的，那么它當(dāng)然要被放在最頂級(jí)的位置，而我們的應(yīng)用程序的組件就作為它的一個(gè)子組件而存在。

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
 <BrowserRouter>
  <App/>
 </BrowserRouter>,
 document.body);

有時(shí)候我們的應(yīng)用只是整個(gè)系統(tǒng)中的一個(gè)模塊，比如一個(gè)使用了ASPNET MVC中的area的后臺(tái)管理模塊，應(yīng)用中的URL總是以 http://localhost/admin/ 開頭。這種情況下我們總不能每次定義pnk和Route的時(shí)候都帶上admin吧？react-router已經(jīng)考慮到了這種情況，所以為我們提供了一個(gè)basename屬性。為BrowserRouter設(shè)置了basename之后，pnk中就可以省略掉admin了，而最后渲染出來(lái)的URL又會(huì)自動(dòng)帶上admin。

<BrowserRouter basename="/admin"/>
 ...
 <pnk to="/home"/> // 被渲染為 <a href="/admin/home" rel="external nofollow" >
 ...
</BrowserRouter>

對(duì)于WEB應(yīng)用，BrowserRouter是我們的首選。但是這里還有一些Browser Router其他的兄弟姐妹，在其他的一些情況下你或許會(huì)用得到。

HashRouter 這個(gè)內(nèi)部使用window.location.hash，由于這里存在一些問(wèn)題，因此官方推薦使用BrowserRouter來(lái)替代。

MemoryRouter 主要用在ReactNative這種非瀏覽器的環(huán)境中，因此直接將URL的history保存在了內(nèi)存中。

StaticRouter 主要用于服務(wù)端渲染。

Link

Link就像是一個(gè)個(gè)的路牌，為我們指明組件的位置。pnk使用聲明式的方式為應(yīng)用程序提供導(dǎo)航功能，定義的Link最終會(huì)被渲染成一個(gè)a標(biāo)簽。pnk使用to這個(gè)屬性來(lái)指明目標(biāo)組件的路徑，可以直接使用一個(gè)字符串，也可以傳入一個(gè)對(duì)象。

// 字符串參數(shù)
<pnk to="/query">查詢</pnk>

// 對(duì)象參數(shù)
<pnk to={{
 pathname: '/query',
 search: '?key=name',
 hash: '#hash'
}}>查詢</pnk>

Link提供的功能并不多，好在我們還有Navpnk可以選擇。Navpnk是一個(gè)特殊版本的Link，可以使用activeClassName來(lái)設(shè)置pnk被選中時(shí)被附加的class，使用activeStyle來(lái)配置被選中時(shí)應(yīng)用的樣式。此外，還有一個(gè)exact屬性,此屬性要求location完全匹配才會(huì)附加class和style。這里說(shuō)的匹配是指地址欄中的URl和這個(gè)Link的to指定的location相匹配。

// 選中后被添加class selected
<Navpnk to={'/'} exact activeClassName='selected'>Home</Navpnk>
// 選中后被附加樣式 color:red
<Navpnk to={'/gallery'} activeStyle={{color:red}}>Gallery</Navpnk>

Route

Route應(yīng)該是react-route中最重要的組件了，它的作用是當(dāng)location與Route的path匹配時(shí)渲染Route中的Component。如果有多個(gè)Route匹配，那么這些Route的Component都會(huì)被渲染。

與pnk類似，Route也有一個(gè)exact屬性，作用也是要求location與Route的path絕對(duì)匹配。

// 當(dāng)location形如 http://location/時(shí)，Home就會(huì)被渲染。
// 因?yàn)?"/" 會(huì)匹配所有的URL，所以這里設(shè)置一個(gè)exact來(lái)強(qiáng)制絕對(duì)匹配。
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>

Route的三種渲染方式

component

這是最常用也最容易理解的方式，給什么就渲染什么。

render

render的類型是function，Route會(huì)渲染這個(gè)function的返回值。因此它的作用就是附加一些額外的邏輯。

<Route path="/home" render={() => {
 console.log('額外的邏輯');
 return (<div>Home</div>);
 }/>

children

這是最特殊的渲染方式。一、它同render類似,是一個(gè)function。不同的地方在于它會(huì)被傳入一個(gè)match參數(shù)來(lái)告訴你這個(gè)Route的path和location匹配上沒(méi)有。二、第二個(gè)特殊的地方在于，即使path沒(méi)有匹配上，我們也可以將它渲染出來(lái)。秘訣就在于前面一點(diǎn)提到的match參數(shù)。我們可以根據(jù)這個(gè)參數(shù)來(lái)決定在匹配的時(shí)候渲染什么，不匹配的時(shí)候又渲染什么。

// 在匹配時(shí)，容器的calss是pght，<Home />會(huì)被渲染
// 在不匹配時(shí)，容器的calss是dark，<About />會(huì)被渲染
<Route path='/home' children={({ match }) => (
 <div className={match ? 'pght' : 'dark'}>
 {match ? <Home/>:<About>}
 </div>
 )}/>

所有路由中指定的組件將被傳入以下三個(gè)props。

match.
location.
history.

這里主要說(shuō)下match.params.透過(guò)這個(gè)屬性，我們可以拿到從location中解析出來(lái)的參數(shù)。當(dāng)然，如果想要接收參數(shù)，我們的Route的path也要使用特殊的寫法。

如下示例，三個(gè)pnk是一個(gè)文章列表中三個(gè)鏈接，分別指向三篇id不同的文章。而Route用于渲染文章詳情頁(yè)。注意path='/p/:id' ，location中的對(duì)應(yīng)的段會(huì)被解析為id=1 這樣的鍵值。最終這個(gè)鍵值會(huì)作為param的鍵值存在。Route中的組件可以使用this.props.match.params.id來(lái)獲取，示例中使用了結(jié)構(gòu)賦值。

<pnk to='/p/1' />
<pnk to='/p/2' />
<pnk to='/p/3' />

......

<Route path='/p/:id' render={(match)=<h3>當(dāng)前文章ID:{match.params.id}</h3>)} />

Redirect

當(dāng)這個(gè)組件被渲染是，location會(huì)被重寫為Redirect的to指定的新location。它的一個(gè)用途是登錄重定向，比如在用戶點(diǎn)了登錄并驗(yàn)證通過(guò)之后，將頁(yè)面跳轉(zhuǎn)到個(gè)人主頁(yè)。

<Redirect to="/new"/>

Router中常用的組件基本上都介紹了一遍，不過(guò)也只是蜻蜓點(diǎn)水而已。如果想更透徹的理解路由系統(tǒng)，建議還是去翻看官方文檔并且試著去用一用。文中給出的示例也是非常精簡(jiǎn)的片段，僅僅作為參考。

以上這篇簡(jiǎn)單談?wù)凴eact中的路由系統(tǒng)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論