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

posted on 2017-06-24 10:19  猫不白  阅读(5045)  评论(3编辑  收藏  举报

导航