我們知道，Route組件主要的作用就是當(dāng)一個(gè)location匹配路由的path時(shí)，渲染某些UI。示例如下：

 

 
 
 


// 如果應(yīng)用的地址是/,那么相應(yīng)的UI會(huì)類似這個(gè)樣子：

 


// 如果應(yīng)用的地址是/news,那么相應(yīng)的UI就會(huì)成為這個(gè)樣子：

 

組件有如下屬性：

1. path（string）: 路由匹配路徑。（沒(méi)有path屬性的Route 總是會(huì) 匹配）；

2. exact（bool）：為true時(shí)，則要求路徑與location.pathname必須完全匹配；

3. strict（bool）：true的時(shí)候，有結(jié)尾斜線的路徑只能匹配有斜線的location.pathname；

再次奉上兩個(gè)鮮活的例子：

exact配置：

 strict配置：

同時(shí)，新版的路由為 提供了三種渲染內(nèi)容的方法：

1. ：在地址匹配的時(shí)候React的組件才會(huì)被渲染，route props也會(huì)隨著一起被渲染；

2. ：這種方式對(duì)于內(nèi)聯(lián)渲染和包裝組件卻不引起意料之外的重新掛載特別方便；

3. ：與render屬性的工作方式基本一樣，除了它是不管地址匹配與否都會(huì)被調(diào)用；

第一種方式?jīng)]啥可說(shuō)的，和之前一樣，這里我們重點(diǎn)看下 的渲染方式：

// 行內(nèi)渲染示例
 
Home
}/>

// 包裝/合成
const FadingRoute = ({ component: Component, ...rest }) => (
  (
 
  
 
 )}/>
)

TIPS: 第三坑！ 的優(yōu)先級(jí)要比 高，所以不要在同一個(gè) 中同時(shí)使用這兩個(gè)屬性。

和之前版本沒(méi)太大區(qū)別，重點(diǎn)看下組件屬性：

1. to（string/object）：要跳轉(zhuǎn)的路徑或地址；

2. replace（bool）： 為 true 時(shí) ，點(diǎn)擊鏈接后將使用新地址替換掉訪問(wèn)歷史記錄里面的原地址； 為 false 時(shí) ，點(diǎn)擊鏈接后將在原有訪問(wèn)歷史記錄的基礎(chǔ)上添加一個(gè)新的紀(jì)錄。 默認(rèn)為 false ；

示例如下：

// Link組件示例

// to為string
關(guān)于

// to為obj


// replace 

是 的一個(gè)特定版本, 會(huì)在匹配上當(dāng)前 URL 的時(shí)候會(huì)給已經(jīng)渲染的元素添加樣式參數(shù)，組件屬性：

1. activeClassName（string）：設(shè)置選中樣式，默認(rèn)值為 active；

2. activeStyle（object）：當(dāng)元素被選中時(shí), 為此元素添加樣式；

3. exact（bool）：為 true 時(shí), 只有當(dāng)?shù)刂吠耆ヅ?class 和 style 才會(huì)應(yīng)用；

4. strict（bool）：為 true 時(shí)，在確定位置是否與當(dāng)前 URL 匹配時(shí)，將考慮位置 pathname 后的斜線； isActive（func）：判斷鏈接是否激活的額外邏輯的功能；

從這里我們也可以看出，新版本的路由在組件化上面確實(shí)下了不少功夫，來(lái)看看NavLink的使用示例：

// activeClassName選中時(shí)樣式為selected
FAQs

// 選中時(shí)樣式為activeStyle的樣式設(shè)置
FAQs

// 當(dāng)event id為奇數(shù)的時(shí)候，激活鏈接
const oddEvent = (match, location) => {
 if (!match) {
 return false
 }
 const eventID = parseInt(match.params.eventID)
 return !isNaN(eventID) && eventID % 2 === 1
}

Event 123

該組件用來(lái)渲染匹配地址的第一個(gè) 或者 。那么它與使用一堆route又有什么區(qū)別呢？

的獨(dú)特之處是獨(dú)它僅僅渲染一個(gè)路由。相反地，每一個(gè)包含匹配地址(location)的 都會(huì)被渲染。思考下面的代碼：

如果現(xiàn)在的URL是 /about ，那么 , , 還有 都會(huì)被渲染，因?yàn)樗鼈兌寂c路徑(path)匹配。這種設(shè)計(jì)，允許我們以多種方式將多個(gè) 組合到我們的應(yīng)用程序中，例如側(cè)欄(sidebars)，面包屑(breadcrumbs)，bootstrap tabs等等。 然而，偶爾我們只想選擇一個(gè) 來(lái)渲染。如果我們現(xiàn)在處于 /about ，我們也不希望匹配 /:user （或者顯示我們的 “404” 頁(yè)面 ）。以下是使用 Switch 的方法來(lái)實(shí)現(xiàn)：

現(xiàn)在，如果我們處于 /about ， 將開(kāi)始尋找匹配的 。 將被匹配， 將停止尋找匹配并渲染 。同樣，如果我們處于 /michael ， 將被渲染。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司的支持。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。