AJAX后退按钮实现:它们如何工作？

// 当AJAX请求完成时，调用此函数以更新历史记录
function updateHistory(url, data) {
  // 使用pushState方法添加新状态到历史记录
  history.pushState(data, '', url);
}

// 监听popstate事件，以便在用户点击后退按钮时执行相应操作
window.addEventListener('popstate', function(event) {
  if (event.state) {
    // 处理后退按钮操作，例如更新页面内容
    updatePageContent(event.state);
  }
});

import { useHistory } from 'react-router-dom';

function MyComponent() {
  const history = useHistory();

  // 当AJAX请求完成时，调用此函数以更新历史记录
  function updateHistory(url, data) {
    // 使用history.push方法添加新状态到历史记录
    history.push(url, data);
  }

  // 使用history.listen方法监听历史记录变化
  history.listen((location, action) => {
    if (action === 'POP') {
      // 处理后退按钮操作，例如更新页面内容
      updatePageContent(location.state);
    }
  });
}