React Router的Route的使用

Route 是 React Router中用於配置路由信息的組件，每當有一個組件須要根據 URL 決定是否渲染時，就須要建立一個 Route。

1) path

每一個 Route 都須要定義一個 path 屬性,path 屬性是一個url，當 URL 匹配一個 Route 時，這個 Route 中定義的組件就會被渲染出來。

2）Route 渲染組件的方式

（1）component

component 的值是一個組件，當 URL 和 Route 匹配時，Component屬性定義的組件就會被渲染。例如：

<Route path='/foo' component={Foo} >

當 URL = "http://example.com/foo" 時，Foo組件會被渲染。

(2) render

render 的值是一個函數，這個函數返回一個 React 元素。這種方式方便地爲待渲染的組件傳遞額外的屬性。例如：

<Route path='/foo' render={(props) => {
 <Foo {...props} data={extraProps} />
}}>
</Route>

Foo 組件接收了一個額外的 data 屬性。

（3）children

children 的值也是一個函數，函數返回要渲染的 React 元素。 與前兩種方式不一樣之處是，不管是否匹配成功， children 返回的組件都會被渲染。可是，當匹配不成功時，match 屬性爲 null。例如:

<Route path='/foo' render={(props) => {
 <div className={props.match ? 'active': ''}>
  <Foo {...props} data={extraProps} />
 </div>
}}>
</Route> 

  若是 Route 匹配當前 URL，待渲染元素的根節點 div 的 class 將設置成 active.