Kwhitejr Kwhitejr - 3 months ago 20
React JSX Question

How to nest components under a common header

Trying to understand the basics of

react-router
and I'm a little overwhelmed by the choices and options. I have a
react
+
redux
app built under the general guidelines provided by Teropa's awesome tutorial.

Essentially all I need is a common
Header
component across all routes; from the Header, users can click a button to change the main component (each view provides different data visualizations). This container should also link to the redux store, and let common data flow down to whichever main component is selected. This strikes me as a super common need, but I cannot find a solid example/tutorial >_<

So far the set up is as follows:

// 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);


The
Summary
,
Users
, and
Devices
components are just standard dumb React components that populate based upon data flow-downs. At the moment, the error received is that those dumb components do not have access to redux store. However, if I link them directly to the store, they render without the
Header
.

EDIT: removed reference to deprecated
<RouteHandler />

Answer

From the documentation:

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

Try with

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

You should also fix your routes so AppContainer actually contain the rest of the components (and the 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>;