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的内容。