用不同的 html 反应路由器

Question

我想用react router来处理不同的路由，问题是每条路由都有自己的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 组件嵌套为 [ 的子组件=12=].

当您导航到 '/blog' 时，react-router 在 BlogLayout "template" 默认。如果您转到特定的博客，例如 '/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')
)

用不同的 html 反应路由器

react router with different htmls

components

twitter-bootstrap

reactjs

react-router