React Router的Route的使用
阿新 • • 發佈:2018-12-23
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.