React Router中如何禁用浏览器返回按钮 点击后无任何跳转

• 你在componentDidMount里临时调用createBrowserHistory生成的实例，和<Router>组件内部默认使用的history实例不是同一个对象，所以你写的监听逻辑完全没有作用在实际的路由跳转上，这也是之前逻辑失效、异常跳转到/的根本原因。
• 原有逻辑里的history.go(0)是触发整页重载，本身也不是“阻止返回跳转”的正确实现。

浏览器没有提供原生API可以完全禁用返回按钮，但可以通过历史栈抵消操作，让用户点击返回时看不到任何页面跳转，达到“按钮无效果”的体验：

1. 生成全局统一的history实例，传入<Router>的history属性，保证路由操作、事件监听用的是同一个历史栈对象。
2. 监听history的POP事件（用户点击浏览器返回/前进、触发历史栈移动时就会触发这个事件），一旦触发，立刻把当前要跳转的路径重新push回历史栈，抵消这次后退的动作，用户不会感知到任何跳转。

// 从react-router-dom导入对应API
import { Router, Switch, Route, createBrowserHistory } from 'react-router-dom';
// 提前生成和路由绑定的统一history实例
const browserHistory = createBrowserHistory();

export default class Main extends Component {
  componentDidMount() {
    // 监听同一个history实例的路由变化
    browserHistory.listen((newLocation, action) => {
      if (action === 'POP') {
        // 把当前要跳转的位置重新push回历史栈，抵消这次POP触发的后退动作
        browserHistory.push({
          pathname: newLocation.pathname,
          search: newLocation.search,
          hash: newLocation.hash,
          state: newLocation.state
        });
      }
    });
  }

  render() {
    return (
      <div>
        {/* 给Router传入统一的history实例，保证和监听逻辑连通 */}
        <Router history={browserHistory}>
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/main/component1" component={Component1} />
            <Route path="/main/component2" component={Component2} />
            <Route path="/main/component3" component={Component3} />
          </Switch>
        </Router>
      </div>
    );
  }
}

• 上述逻辑会拦截所有触发历史栈移动的操作，如果你需要在特定页面允许正常返回，可以在POP回调里增加判断：比如当前路径在允许返回的白名单里，就不执行push抵消逻辑，让路由正常跳转。
• 不要使用history.go(0)触发整页重载来“模拟禁用返回”，整页重载会丢失当前页面的状态、触发资源重新加载，体验极差。
• 所有浏览器返回禁用的实现都无法做到完全阻止用户离开当前页面（比如用户手动修改地址栏、刷新页面的行为是无法拦截的），上述方案能满足绝大多数业务场景下“点击返回无页面变化”的需求。

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