@IliaSky Fantastic, thanks so much! Now I’m trying to figure out how to put each page in its own component and then use that inside the <Navigator /> component. I’ll keep working on it and hope that @argelius and/or @patrick notice this topic!
Edit:
Forgive me for the large post but I thought someone coming in the future may benefit! I think I got it:
// Import pages as separate compents
import Home from "./Home";
import TeamMember from "./TeamMember";
/* pushPage() instead of replacePage() */
load(route) {
this.hideMenu();
this.nav.pushPage(route, {animation: "fade"});
},
/* Pass props to the page so it can render the toolbar */
renderPage: function(route, nav) {
route.props = route.props || {};
route.props.renderToolbar = this.renderToolbar.bind(this, route);
route.props.title = route.title;
return React.createElement(route.page, route.props);
},
And then in render()
:
<List
dataSource={[
{title: "Home", page: Home},
{title: "Team Member", page: TeamMember}
]}
renderRow={route => (
<ListItem key={route.title} onClick={this.load.bind(this, route)} tappable>{route.title}</ListItem>
)}
/>
I am getting an interesting warning in the console though:

My Home.js file is super simple. In its entirety:
import React from "react";
import ReactDOM from "react-dom";
import {Page} from "react-onsenui";
export default React.createClass({
render() {
return (
<Page key={this.props.title} renderToolbar={this.props.renderToolbar}>
<p style={{textAlign: "center"}}>
We're on the HOME page!
</p>
</Page>
);
}
});