Page is URL-bound React component. For example, the /questions/votes
URL on StackOverflow is bound to the <Questions sort="votes" />
component.
Layout is a wrapper for Page component, which itself can be wrapped in other layouts (for more complex pages). Layout usually contains header, footer, navigation, sidebar and other similar components as well as {this.props.children}
.
It's is better to define the type of the layout to use on a Page lavel as opposed to somwhere else (e.g. in routing). Also at a page level you want to define page title either as a property or a state variable which is then passed to the layout component (or asynchronously via Flux's action creator).
With the layout approach # 1 (PageOne.jsx) the page can be rendered like this:
var React = require('react');
var copyProperties = require('react/lib/copyProperties');
/**
* Check if Page component has a layout property; and if yes, wrap the page
* into the specified layout, then mount to document.body.
*/
function render(page) {
var child, props = {};
while (page.defaultProps.layout) {
child = page(props, child);
copyProperties(props, page.defaultProps);
page = page.defaultProps.layout;
}
React.renderComponent(page(props, child), document.body);
}
render(require('./pages/profile.jsx'));
Where are you putting that function render(page) code. Do you have that in a .js file somewhere? And what is this child param for page()? where is that coming from and what are you doing with that when you pass it into the component as a param?