react router中合理使用默認路由

react router中合理使用默認路由

當應用中需要一個默認頁面，且默認頁面的內容不會疊加到其他頁面時，可以使用

 <IndexRoute component={Basic}/>

來提供默認路由的內容。

注意：
如果把componnet內容直接放在根路由的render中，每一個子路由都會顯示（包含）根路由component的所有內容。

如下是合理的應用方式

<Route path="/student/:id/admin" component={RequireAuth(Admin)}>
    <IndexRoute component={Basic}/>
    <Route path="/student/:id/admin/course" component={course}/>
    <Route path="/student/:id/admin/books" component={books}/>
    <Route path="/student/:id/admin/activity" component={activity}/>
</Route>

如下是不合理的應用方式

<Route path="/student/:id/admin" component={RequireAuth(Admin)}>
    <Route path="/student/:id/admin/course" component={course}/>
    <Route path="/student/:id/admin/books" component={books}/>
    <Route path="/student/:id/admin/activity" component={activity}/>
</Route>

這種方式下，basic component的內容直接放置在admin中，每一個子路由中都會包含basic的內容。