Question

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

基本上我需要的是所有路线上的共同Header组件;从Header中，用户可以单击按钮来更改主要组件（每个视图提供不同的数据可视化）。此容器还应链接到redux存储，并让公共数据向下流向选择的任何主要组件。这让我感到非常普遍，但我找不到一个可靠的示例/教程＆gt; _＆lt;

到目前为止，设置如下：

// 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组件只是基于数据流量填充的标准dumb React组件。目前，收到的错误是那些哑组件无法访问redux存储。但是，如果我将它们直接链接到商店，则会在没有Header的情况下进行渲染。

编辑：删除了对已弃用的<RouteHandler />

的引用

Answer 1

来自documentation：

RouteHandler消失了。路由器现在自动填充基于活动路径的组件的this.props.children。

尝试

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商店，则必须先进行渲染。为此，您必须手动执行此操作，或者只使用react-redux库。此外，最好将Provider置于比路由器更高的水平。

所以你的初始代码就像：

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

所有组件都可以访问context中的商店。为了避免混乱，只需使用{ connect } from 'react-redux'，将组件包装在其中并选择所需的属性。

如何在通用标头下嵌套组件

2 个答案: