Onsen React RouterNavigator example

RouterNavigator.jsx

import React, {Component} from 'react';

import {Page, Toolbar, Button, BackButton, RouterNavigator, RouterUtil, Input} from 'react-onsenui';

const SecondPage = ({pushPage, popPage}) => {
  return (
    <Page contentStyle={{padding: 10}}>
      <Toolbar />
      <br/> <br/> <br/>
      <Button onClick={popPage}>Pop page</Button>
    </Page>
  );
};

class MainPage extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      formValue: '',
    }
  }
  render() {
    return (
      <Page contentStyle={{padding: 10}}>
        <Toolbar></Toolbar>
        <br/><br/><br/>
        <Button onClick={() => this.props.pushPage(SecondPage, 'second')}>
          Push page
        </Button> <br/> <br/>
        <Input placeholder="write something..." modifier="material" value={this.state.formValue} onChange={(e) => {this.setState({formValue: e.target.value})}} />
      </Page>
    );
  }
}

export default class Nav extends Component {
  constructor(props) {
    super(props);
    const routeConfig = RouterUtil.init([{
        component: MainPage,
        props: {
          key: 'main',
          pushPage: (...args) => this.pushPage(...args)
        }
    }]);
    this.state = {routeConfig};
  }

  pushPage(page, key) {
    const route = {
      component: page,
      props: {
        key: key,
        popPage: () => this.popPage(),
        pushPage: (...args) => this.pushPage(...args)
      }
    };

    let routeConfig = this.state.routeConfig;

    routeConfig = RouterUtil.push({
      routeConfig,
      route
    });

    this.setState({routeConfig});
  }

  popPage(options = {}) {
    let routeConfig = this.state.routeConfig;

    routeConfig = RouterUtil.pop({
      routeConfig,
      options: {
        ...options,
        animationOptions: {duration: 0.4}
      }
    });

    this.setState({routeConfig});
  }

  onPostPush() {
    const routeConfig = RouterUtil.postPush(this.state.routeConfig);
    this.setState({routeConfig});
  }

  onPostPop() {
    const routeConfig = RouterUtil.postPop(this.state.routeConfig);
    this.setState({routeConfig});
  }

  renderPage(route) {
    const props = route.props || {};
    return <route.component {...props} />;
  }

  render() {
    return (
      <Page>
        <RouterNavigator
          swipeable={true}
          swipePop={options => this.popPage(options)}
          routeConfig={this.state.routeConfig}
          renderPage={this.renderPage}
          onPostPush={() => this.onPostPush()}
          onPostPop={() => this.onPostPop()}
        />
      </Page>
    );
  }
}