Best posts made by JanvB

@munsterlander: thank you. I managed to do it differently with three components (parent and 2 child components ( <SideMenu> and <Navigator> ). In short:

{/* Parent component with initialroute */}

class Main extends Component {
        constructor( props ){
		super( props );
		this.state = { 
					isOpen: false,
					route: { component: Home, key: "HOME_PAGE" } 
					};
		this.hide = this.hide.bind( this );
		this.setView = this.setView.bind( this );
		this.renderPage = this.renderPage.bind( this );
	}
...

	renderPage( route, navigator ){
		return <Page
			renderToolbar={ this.renderToolbar.bind( this ) }
			renderFixed={ this.renderFixed.bind( this ) }
		>
		  <this.state.route.component key={ this.state.route.key } navigator={ navigator } { ...route.props } />
		</Page>
	}

...

render(){ return (
   <Splitter>
	 <SplitterSide
	            side='left'
	            isOpen={ this.state.isOpen }
	            onClose={ this.hide.bind( this ) }
	            onOpen={ this.show.bind( this ) }
                    {/* Other options */}
                    >
		    <Page>
			<SideMenu
				hide={ this.hide }
				setView={ this.setView }
			/>
		    </Page>
	</SplitterSide>
	<SplitterContent>
		<Navigator
			renderPage={ this.renderPage }
			initialRoute={ this.state.route }
		/>
	</SplitterContent>
    </Splitter>

Then in the <SideMenu> component you can alter the parents state via the setView function (accessible via this.props.setView):

	{ /* Each menu-item has an id ('idx' ). MetuData is an array of objects defined outside of the React component:
        const menuData = [
  	  { index: 1, title: "Home",  key: "HOME_PAGE", component: Home },
  	  { index: 2, title: "Page1", key: "PAGE1", component: Page1 },
  	  { index: 3, title: "Page2", key: "PAGE2", component: Page2 },
  	  { index: 4, title: "Page3", key: "PAGE3", component: Page3 }
        ];
       The child component manages the parent state (in this example you import the Pages1/2/3 components in the <SideMenu> component).
       */ }

export class SideMenu extends Component {
	constructor( props ){
		super( props );
		this.setRoute = this.setRoute.bind( this );
	}
       setRoute( idx ){
		const { component, key } = menuData.find(  ( item ) => item.index === idx );
		this.props.hide();
		return this.props.setView( component, key );
	}
...

Because of the state changes, React will rerender the parent component. It is probably a more React-style way of implementing this. (I already had this, it wasn’t working because I didn’t have to latest version of the react-onsenui package installed - there was an issue with the <Navigator> component: https://github.com/OnsenUI/react-onsenui/issues/94)