javascript - 如何在公共(public)标题下嵌套组件

Question

试图了解 react-router 的基础知识我对这些选择和选项有点不知所措。我有一个 react + redux应用程序是根据 Teropa's awesome tutorial 提供的一般指南构建的.

基本上我只需要一个普通的 Header跨所有路线的组件；从 Header 中，用户可以单击一个按钮来更改主要组件(每个 View 提供不同的数据可视化)。这个容器还应该链接到 redux 存储，并让公共(public)数据向下流到选定的任何主要组件。这是一个非常普遍的需求，但我找不到可靠的示例/教程>_<

目前的设置如下:

// index.jsx --> sets up the redux store and react-router routes

const routes = <Route>
  <Route path="/" component={AppContainer} />
    <IndexRoute to="/summary" />
    <Route path="summary" component={Summary} />
    <Route path="users" component={Users} />
    <Route path="devices" component={Devices} /> 
</Route>;

ReactDOM.render(
  <Provider store={store}>
    <Router history={hashHistory}>{routes}</Router>
  </Provider>,
  document.getElementById('app')
);

---

// App.jsx --> the main container component

export const App = React.createClass({
  render: function() {
    return <div>
      <Header {...this.props} />
      {this.props.children}
    </div>;
  }
});

function mapStateToProps(state) {
  return state;
}

export const AppContainer = connect(mapStateToProps, actionCreators)(App);

Summary , Users , 和 Devices组件只是标准的哑 React 组件，它们根据数据流向下填充。目前，收到的错误是那些dumb组件无法访问 redux 存储。但是，如果我将它们直接链接到商店，它们将在没有 Header 的情况下呈现。 .

编辑:删除了对弃用 <RouteHandler /> 的引用

Answer 1

来自documentation :

RouteHandler is gone. Router now automatically populates this.props.children of your components based on the active route.

尝试

export const App = React.createClass({
  render: function() {
    return <div>
      <Header {...this.props} />
      { this.props.children }
    </div>;
  }
});

您还应该修复您的路由，以便 AppContainer 实际上包含其余组件(和 Redirect):

const routes = <Route component={AppContainer} />
  <Redirect from="/" to="/summary" />
  <Route path="summary" component={Summary} />
  <Route path="users"   component={Users} />
  <Route path="devices" component={Devices} /> 
</Route>;