首先,React Router 是一個基于react之上的強大的路由庫,你可以通過他實現快速的添加視圖和數據流,同時保持頁面與URL之間的同步。
路由配置是一組指令,用來告訴router如何匹配URL以及匹配之后如何執行代碼。
Router 只是一個容器用來存放route的盒子,route只有在router容器中才會起作用
Route 是具體的路由的配置,參數:?path,component,path配置的是路由的的匹配規則,這個屬性是可以省略的,這樣的haunted,不管路徑是否匹配,總是會加載制定組件。component配置的是具體記載的是哪一個組件。
IndexRoute 組件用來指定默認情況下加載的子組件。它的參數是:component,用來指定加載的組件。
Redirect 組件用于路由的跳轉,即用戶訪問一個路由,會自動跳轉到另外一個路由。參數:from to ?from 是當前的路由的路徑,to是要跳轉的路由的路徑
{/* 從 /inbox/messages/:id跳轉到 /messages/:id*/}?
<Route path='inbox' component={Inbox}>
? ? ? ? <Redirect ? ?from="messages/:id" ? to="/messages/:id"/>
</Route>
上面的例子中,當訪問/inbox/messages/5,會自動跳轉到/messages/5(也就是由原來的相對路徑跳轉到了絕對路徑)。
IndexRedirect 組件用于訪問根路由的時候將用戶重定向到某個子組件。參數:to 用于指定默認進入的路由
<Route ? path="/" ? ?component={App}>
? ? ? ? ? ? ? <IndexRedirect ? ? ? ?to="/welcome"/>?
? ? ? ? ? ? ? <Route ? ?path="welcome" ? ? ? component={Welcome} ? />
? ? ? ? ? ? ? ?<Route ? ?path="welcome" ? ? ?component={Welcome}? />
< /Route>
上面的例子中,當用戶訪問跟路由的時候,會自動重定向到子組件 welcome 組件上。
Link 組件用于取代<a>元素(實際他就是a鏈接,在網頁上查看元素的話顯示的就是a標簽),生成一個鏈接,允許用戶點擊后跳轉到另一個路由,它的參數是:to ,activeStyle,activeClassName,onlyActiveOnIndex。 to用于指定跳轉的路由,activeStyle點擊之后的樣式,activeClassName配置的是點擊之后要添加的class,onlyActiveOnIndex它的作用和下面的IndexLink的作用類似,具體事例見IndexLink下的代碼。
IndexLink 用于鏈接到根路由。因為對于跟路由來說,activeStyle和activeClassName會失效(實際是總是生效),因為 / ?會匹配任何自路由,二IndexLink組件會使用路徑的精確匹配。 參數:to , activeClassName作用和上面的Link的參數作用類似。
? <Link to="/" activeClassName="active" onlyActiveOnIndex={true}>
? ? ? ?Home
</Link>
路由的鉤子:每個路由都有Enter和Leave鉤子,用戶進入或離開該路由的時候會觸發??梢酝ㄟ^定義 onEnter,和 routerWillLeave 方法來實現一些功能。