React中this.props.history.goBack在Android WebView中无法生效的问题

我之前也踩过Android WebView和React Router联动的坑，结合你的代码场景，给你几个实用的解决思路：

1. 切换到HashRouter（最直接的前端修复） #

Android WebView对HTML5 History API的支持存在兼容性问题，而HashRouter是基于URL哈希（#）来管理路由的，不需要依赖浏览器的history栈，适配WebView的效果更好。

修改你的App组件代码，首先导入HashRouter：

import { HashRouter as Router, Route, Link } from 'react-router-dom';

其余路由结构保持不变即可，HashRouter会自动处理路由的哈希跳转，此时history.goBack()就能正常触发回退了。

2. 优化你的goBack方法绑定 #

注意到你在About组件里用了箭头函数定义goBack，这已经自动绑定了this上下文，所以不需要在onClick里再调用bind(this)，可以简化代码：

class About extends Component{
  goBack = () => {
    alert(this.props.history.location.pathname)
    this.props.history.goBack();
  }
  render(){
    return(
      <div className="jumbotron">
        <h1 className="display-3">About Me</h1>
        {/* 直接调用goBack即可，无需bind */}
        <button onClick={this.goBack}>React Back</button>
      </div>
    )
  }
}

3. Android端WebView的关键配置 #

前端修改后，还需要确保Android WebView的配置支持前端路由的回退逻辑：

（1）拦截返回键，优先让WebView处理 #

在WebView所在的Activity中，重写onBackPressed方法，让WebView先尝试回退历史栈，再考虑退出Activity：

@Override
public void onBackPressed() {
    WebView webView = findViewById(R.id.your_webview_id);
    if (webView != null && webView.canGoBack()) {
        webView.goBack(); // 让WebView执行前端的回退逻辑
    } else {
        super.onBackPressed(); // 没有可回退的页面时，退出Activity
    }
}

（2）开启必要的WebView设置 #

确保WebView开启了JavaScript和DOM存储支持，这是React Router正常运行的基础：

WebView webView = findViewById(R.id.your_webview_id);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 必须开启JS
settings.setDomStorageEnabled(true); // 开启DOM存储，支持React Router的状态保存
webView.setWebChromeClient(new WebChromeClient()); // 配置ChromeClient，增强JS支持

为什么会出现这个问题？ #

Android系统的WebView默认不会关联前端的history栈，点击物理返回键时直接触发Activity的退出逻辑，而非前端路由的回退。同时，部分低版本Android的WebView对HTML5 History API的pushState/popState支持不完善，导致history.goBack()无法触发预期的路由跳转。

内容的提问来源于stack exchange，提问作者spongebob25