How to use react-onsenui - 10 common examples

import {RouterUtil} from 'react-onsenui';

import MainPage from './main-page';
import SecondaryPage from './secondary-page';

const initialState = RouterUtil.init([{
	component: MainPage,
	props: {
		key: 'main'
	}
}]);

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);

constructor(props) {
    super(props);

    const routeConfig = RouterUtil.init([{
        component: MainPage,
        props: {
          key: 'main',
          pushPage: (...args) => this.pushPage(...args)
        }
    }]);

    this.state = {routeConfig};

  }

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

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

    this.setState({routeConfig});
  }

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};

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

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

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};

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

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};