ReactJS app in Android webview - Pressing back button closes app

Question

I'm using react-dom 15.3.2 and react-router ^4.2.0. Note: I am using ReactJS, not React-Native.

I've got a simple app with navigation links which defines links like:

<Link to="/contactus">
  Contact Us
</Link>
<Link to="/faq">
  FAQ
</Link>

These routes are defined and work fine in a browser. I can go to a page, press back, and everything works as expected.

However I am trying to wrap my website into an Android WebView so I can create an app.

i.e.

    webView = (WebView) findViewById(R.id.webView);
    webView.getSettings().setJavaScriptEnabled(true);
    webView.loadUrl(myWebsiteURL);

The problem is that when I press the back button it closes the application immediately, it doesn't go through the "page history" like how it works on the browser.

Answer 1

You have to override the activity's default behavior, and call the webview directly.

@Override
public void onBackPressed() {
    if (webView.canGoBack()) {
        webView.goBack();
    } else {
        super.onBackPressed();
    }
}

Reference: https://stackoverflow.com/a/37673643/1052581