用不同的htmls反应路由器

Question

我想使用react路由器处理不同的路由，问题是每条路由都有自己的html（考虑bootstap网格系统，每个页面都有自己的布局） 是否有可能为不同的路由加载不同的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'时， react-router 会在 BlogListLayout <内生成 BlogLayout 组件/ strong>＆＃34;模板＆＃34;默认情况下。如果您转到特定博客，例如'/blog/some-user-blog'， BlogEntryLayout 将代替呈现，但仍会嵌套在 BlogLayout 模板。

'/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')
)