如何在公共 header 下嵌套组件

Question

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

基本上我所需要的只是一个跨所有路由的通用 Header 组件；从 Header 开始，用户可以单击一个按钮来更改主要组件（每个视图提供不同的数据可视化效果）。这个容器也应该 link 到 redux 存储，并让公共数据流到选择的任何主要组件。这让我觉得这是一个非常普遍的需求，但我找不到可靠的 example/tutorial >_<

至此设置如下：

// 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 组件只是基于数据 flow-downs 填充的标准哑 React 组件。目前，收到的错误是那些哑组件无法访问 redux 存储。但是，如果我 link 直接将它们发送到商店，它们将在没有 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>;

Answer 2

如果你想访问redux store，那么你必须先渲染它。为此，您必须手动执行或仅使用 react-redux 库。另外，最好把 Provider 放在上层而不是路由器

因此您的初始代码如下：

ReactDOM.render(
 <Provider store={store}>
   {router}
 </Provider>,
 domRef
);

之后您的所有组件都将有权访问存储在 context 中。为避免所有混乱，只需使用 { connect } from 'react-redux'，将组件包裹在其中并 select 需要的属性。

如何在公共 header 下嵌套组件

How to nest components under a common header

javascript

reactjs

react-router

react-redux