@munsterlander ， yeah It is working as the backbutton in the page, but my concern is that you deploy the app to the device or simulator, the hardware backbutton(on the bottom of the device screen) just exits app(it doesn’t go back to the previous page). Not sure if you have understood the case.

@munsterlander , here is my code (main.js), actually it is copied from official document, and I just tested, the android device backbutton always exits the app

import React from 'react';
import ReactDOM from 'react-dom';
import {Page, Tabbar, Tab, Toolbar, Navigator, Button, BackButton} from 'react-onsenui';
import 'onsenui'

var index = 0;

var MyPage = React.createClass({
  renderToolbar: function(route, navigator) {
    const backButton = route.hasBackButton
      ? <BackButton onClick={this.handleClick.bind(this, navigator)}>Back</BackButton>
      : null;

    return (
      <Toolbar>
        <div className='left'>{backButton}</div>
        <div className='center'>{route.title}</div>
      </Toolbar>
    );
  },

  handleClick: function(navigator) {
          navigator.popPage();
  },

  pushPage: function(navigator) {
    navigator.pushPage({
      title: `Another page ${index}`,
      hasBackButton: true
    });

    index++;
  },

  renderPage: function(route, navigator) {
    return (
      <Page key={route.title} renderToolbar={this.renderToolbar.bind(this, route, navigator)}>
        <section style={{margin: '16px', textAlign: 'center'}}>
          <Button onClick={this.pushPage.bind(this, navigator)}>
            Push Page
          </Button>
        </section>
      </Page>
    );
  },

  render: function() {
    return (
      <Navigator
        renderPage={this.renderPage}
        initialRoute={{
          title: 'First page',
          hasBackButton: false
        }}
      />
    );
  }
});


ReactDOM.render(<MyPage />, document.getElementById('app'));

@munsterlander, as you said the behavior is the onsen default, do you mean the device backbutton by default will NOT exit app? I just tried example from official documentation and found that was NOT the case, or is the problem only with onsen-react?

@munsterlander , as I described, the device back button always exits the app by default. For example, I have several pages which are linked by pushPage(), and I have also coded the onsen backbutton on the top of the screen to navigate back to the home, the problem is on the backbutton at the bottom of the screen, which is the android device backbutton, and tapping the button will exit the app, regardless of the navigation path. What I want is to make the device backbutton just like the onsen backbutton on the top, back to the previous page until we reach the home, and only if we are at home page, the device backbutton exit the app on tapping.

@munsterlander I guess I’ve found some clue, i just have to include cordova.js in the index.html,

<script type="text/javascript" src="cordova.js"></script>

what I want to do now is exam the current page, if the page is homepage then exit app, otherwise go to previous page, I found a script like this, I’m not sure if it’s ok to use it in onsen ui:

document.addEventListener("backbutton", function(e){
       if($.mobile.activePage.is('#homepage')){
           e.preventDefault();
           navigator.app.exitApp();
       }
       else {
           navigator.app.backHistory()
       }
    }, false);

Here you go:

I tried adding the following code into the main.js (in the onsen react scaffoldings) :

import ons from 'onsenui'
...

ons.ready(function () {
    ons.disableDeviceBackButtonHandler();
    document.addEventListener('backbutton', function () {}, true);
});

But it doesn’t work, the app just exits upon tapping the device back button

Ok, I tried to put the code in to the main.js which is auto generated from the onsen-react template, but it seems that the device backbutton didn’t get disabled.

@munsterlander, thanks for your information! Now my question is, where should I put this event handler in the react source code? Thanks

Couldn’t find a reference in the onsen react documentation, looked the source code and still couldn’t get a clue. But I saw some solutions in the forum but related to onsen-javascript. Could somebody point out the official way to do this? Thanks a lot!

I’m having problem with using Object.assign in the main.js, under the monaca preview mode it is running without any problem, but when I use monaca debug, I saw “Uncaught TypeError: undefined is not a function” in the Applog. I have carefully checked, the error is caused by “Object.assign()”, if I remove the line the app runs on both side.