与不同的htmls反应路由器

Question

我想使用react路由器来处理不同的路由，问题是每个路由都有它自己的html（考虑bootstap网格系统，everypage有它自己的布局） 是否有可能加载diffrent html骨架不同的路线和附加组件到相应的容器？ 另一种解决方案是在每个组件中都放置一个通用html并放入网格，但这种解决方案会降低组件的可返回性 我该如何解决这个问题？

Answer 1

在你的路由配置中，只是让每个你想拥有自己的路径都包含一个根路由。任何子路径都会从基础组件获取html骨架。

modules.export = [ 
    <Route path="firstSkeleton" component={FirstSkeleton}/>, 
    <Route path="secondSkeleton"> 
     <Route path="home" component={SecondSkeleton}/> 
    </Route>, 
    ... 
    <Route /> 
] 

上述各路线的可以有它在根组件中定义自己的布局，然后将子路径将接管从那里并继承。

Answer 2

以下是博客的主页的一般示例（'/'）。它采用了通用Layout父组件和巢HomePageLayout成分为Layout一个孩子。

当您导航到'/blog'，反应路由器默认生成的BlogLayout“模板”内的BlogListLayout组件。如果您转到特定博客（例如'/blog/some-user-blog'），则将呈现，但它仍将嵌套在模板中。

的'/about'路线是没有嵌套子组件的简单页面的一个例子，但你可以看到如何容易，你可以使用IndexRoute多Route组件添加子路径。

import ReactDOM from 'react-dom' 
import { Router, Route, IndexRoute, browserHistory } from 'react-router' 

ReactDOM.render(
    <Router history={browserHistory}> 
    <Route path='/' component={Layout}> 
     <IndexRoute component={HomePageLayout}/> 
     <Route path='/profile/*' component={ProfilePageLayout}/> 
    </Route> 

    <Route path='/blog' component={BlogLayout}> 
     <IndexRoute component={BlogListLayout}/> 
     <Route path='/*' component={BlogEntryLayout}/> 
    </Route> 

    <Route path='/about' component={AboutLayout}/> 
    </Router>, 
    document.getElementById('app') 
)