浏览器的后退和前进按钮在ajax转换页面后不会更改内容

Question

我目前正在使用AJAX进行页面转换的项目中工作。 当我单击一个链接时，该标签的内容随后被我想要的一个更改。但是，当我尝试前进或后退时，尝试使用浏览器按钮前进，只有URL会更改，内容不会更改。

我通过pushState和popState尝试了几种方法，但没有成功...目前，当我单击上一个浏览器按钮时，我会重新加载页面，但此方法是“野蛮的”，不适用于前进按钮！

$('.transition-overlays').on("click", app.TransitionEffectfunction);
TransitionEffectfunction: function(event) {
    event.preventDefault() 
    const href = $(this).attr("href")
    var pageTitle = ( this.title ) ? this.title : this.textContent;
    pageTitle = ( this.getAttribute( "rel" ) === "home" ) ? pageTitle : pageTitle + " - New Page";
    window.history.pushState(null, '', href)

    $.ajax({
      url: href,
      success: function(data){
          $('main').delay(1000).fadeOut(350, function(){
              document.title = pageTitle
              const newPage =$(data).filter('main').html()
              $('main').html(newPage)
              $( newPage ).ready($('main').fadeIn(350))              
          })
      }
    })
     jQuery( document ).ready(function() {
      $(window).on("popstate", function() {
          location.reload();
      });
    }) 
}

如果有人能帮助我，我真的会非常感谢他！