如何为所有组件设置 Header Fixed 只有组件应该在 body 部分呈现 header 应该与 fixed 相同

Question

如何设置 Header 已修复所有组件，只有组件应该在 body 部分呈现此外 header 标题还需要根据 [=] 中呈现的组件动态显示15=] 部分是否可以通过 Router 或 redux

Answer 1

假设这是您的 layout.jsx 文件

render() {
  return(
    <div>
    <Header/>
    <YourRouterHandler>
    </div>
  ) 
}

对于您的 header - 创建商店，并根据您当前呈现的页面更新它。并在你的 <Header/>

中发挥它的价值

Answer 2

这显示在 React Router 文档的第一个示例中。

您想将所有路由包装在一个主要的容器路由中，通常称为 App:

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <Route path="about" component={About}/>
    </Route>
  </Router>
), document.getElementById('root'))

在 App 组件中，您可以使用 this.props.children 显示基于路线的组件。

class App extends Component {
  render() {
    return (
      <div>
        <HeaderAlwaysShown />
        {this.props.children || <DefaultComponent />}
      </div>
    )
  }
}

如何为所有组件设置 Header Fixed 只有组件应该在 body 部分呈现 header 应该与 fixed 相同

How to set Header Fixed for all components only components should render in the body section header should be same as fixed

reactjs

react-router

react-redux