摘要：的值是一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)元素，這個(gè)函數(shù)返回一個(gè)元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。與之前兩種方式不同的是，無(wú)論是否匹配成功，返回的組件都將會(huì)被渲染。使用保證只有當(dāng)?shù)臑闀r(shí)，第一個(gè)才會(huì)被匹配。

React Router v4是對(duì)React Router的一次徹底重構(gòu)，采用動(dòng)態(tài)路由，遵循React中一切皆組件的思想，每一個(gè)Route(路由)都是一個(gè)普通的React組件。

BrowserRouter創(chuàng)建的URL形式如下：
http://react.com/some/path
HashRouter創(chuàng)建的URL形式如下：
http://react.com/#/some/path

使用BrowserRouter時(shí)，一般還需要對(duì)服務(wù)器進(jìn)行配置，讓服務(wù)器能正確處理所有可能的URL.例如，當(dāng)瀏覽器發(fā)送 http://react.com/some/path 和 http://react.com/some/path2兩...，服務(wù)器能夠返回正確的HTML頁(yè)面（也就是單頁(yè)面應(yīng)用中唯一的html頁(yè)面).使用HashRouter則不存在這個(gè)問(wèn)題，因?yàn)閔ash部分的內(nèi)容會(huì)被服務(wù)器自動(dòng)忽略，真正有效的是hash前面的部分，而對(duì)于單頁(yè)面應(yīng)用來(lái)說(shuō)，這部分內(nèi)容是固定的。

路由的配置

1.path

(1)當(dāng)使用BrowserRouter時(shí)，path用來(lái)描述這個(gè)Route匹配的URL的pathname
(2)當(dāng)使用HashRouter時(shí),path用來(lái)描述這個(gè)Route匹配的URL的hash.

2.match

(1)params: Route的path可以包含參數(shù)，例如： 包含一個(gè)參數(shù)id。params就是用于從匹配的URL中解析出path中的參數(shù)，例如：當(dāng)URL="http://react.com/foo/1時(shí)，params={id:1}。
(2)isExact: 是一個(gè)布爾值，當(dāng)URL完全匹配時(shí)，值為true;當(dāng)URL部分匹配時(shí)，值為false.例如：當(dāng)path="/foo"，URL="http://react.com/foo"時(shí)，是完全匹配；當(dāng)URL="http://react.com/foo/1時(shí)，是部分匹配。
(3)path: Route的path屬性，構(gòu)建嵌套路由時(shí)會(huì)使用到。
(4)url: URL的匹配部分。

3.Route渲染組件的方式

(1)component
component的值是一個(gè)組件，當(dāng)URL和Route匹配時(shí)，component屬性定義的組件就會(huì)被渲染。

當(dāng)URL="http://react.com/foo"時(shí)，F(xiàn)oo組件會(huì)被渲染。
(2)render
render的值是一個(gè)函數(shù)，這個(gè)函數(shù)返回一個(gè)React元素，這個(gè)函數(shù)返回一個(gè)React元素。這種方式可以很方便的為待渲染的組件傳遞額外的屬性。
例如：
(

)}>
Foo組件接收了一個(gè)額外的data屬性。
(3)children children的值也是一個(gè)函數(shù)，函數(shù)返回要渲染的React元素。與之前兩種方式不同的是，無(wú)論是否匹配成功，children返回的組件都將會(huì)被渲染。但是當(dāng)匹配不成功時(shí)，match屬性為null。例如：
(

)} />
如果Route匹配當(dāng)前URL,待渲染元素的根節(jié)點(diǎn)div的class將被設(shè)置成active。

4.Switch和exact
當(dāng)URL和多個(gè)Route匹配時(shí)，這些Route都會(huì)執(zhí)行渲染操作。如果只想讓第一個(gè)匹配的Router渲染，那么可以把這些Route包到一個(gè)Switch組件中。
如果想讓URL和Route完全匹配時(shí)，Route才渲染，那么可以使用Route的exact屬性。Switch和exact常常聯(lián)合使用，用于應(yīng)用首頁(yè)的導(dǎo)航。
例如：

如果不使用Switch，當(dāng)URL的pathname為"/posts"時(shí)，和都會(huì)被匹配。
如果不使用exact,"/" "/posts" "/user1"等幾乎所有URL都會(huì)匹配第一個(gè)Route，又因?yàn)镾witch的存在，后面的兩個(gè)Route永遠(yuǎn)也不會(huì)被匹配。使用exact,保證只有當(dāng)URL的pathname為"/"時(shí)，第一個(gè)Route才會(huì)被匹配。

5.嵌套路由

嵌套路由是指在Route渲染的組件內(nèi)部定義新的Route.例如：
const Posts = ({match}) => {

return(
    

        {/*這里match.url等于／posts*/}
        
        
    
)

}
當(dāng)URL的pathname為"/posts/react"時(shí)，PostDetail組件會(huì)被渲染；當(dāng)URL的pathname為"/posts"時(shí)，PostList組件會(huì)被渲染。Route的嵌套使用讓?xiě)?yīng)用可以更加靈活的使用路由。

6.鏈接

Link是React Router提供的鏈接組件，一個(gè)Link組件定義了當(dāng)點(diǎn)擊該Link時(shí)，頁(yè)面應(yīng)該如何路由：
例如：
const Navigation = () => (

)
Link使用to屬性聲明要導(dǎo)航到URL地址。to可以是string或object類型，當(dāng)to為object類型時(shí)，可以包含pathname、search、hash、state、四個(gè)屬性，例如：

pathname:"/posts",
search:"?sort=name",
hash:"#the-hash",
state:{formHome:true}

}}/>
除了使用Link外，我們還可以使用history對(duì)象手動(dòng)實(shí)現(xiàn)導(dǎo)航，history中最常用的方法是push(path,[state])和replace(path,[state]),push會(huì)向?yàn)g覽器歷史記錄中新增一條記錄，replace會(huì)用新紀(jì)錄替換當(dāng)前紀(jì)錄，例如：

history.push("/posts")
history.replace("/posts")

import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function BasicExample() {
return (

  

    

      

        Home
      
      

        About
      
      

        Topics
      
    

    


    
    
    
  

);
}

function Home() {
return (

  
Home

);
}

function About() {
return (

  
About

);
}

function Topics({ match }) {
return (

  
Topics
  

    

      Rendering with React
    
    

      Components
    
    

      Props v. State
    
  

  
   
Please select a topic.
}
  />

);
}

function Topic({ match }) {
return (

  
{match.params.topicId}

);
}

export default BasicExample;