如何使用ReactJS处理浏览器后退按钮单击以在同一URL的视图之间切换？

如何解决如何使用ReactJS处理浏览器后退按钮单击以在同一URL的视图之间切换？

我有一个服务器端渲染的React应用，该应用在诸如 www.example.com 之类的URL上显示逐步形式。此表单具有1至4的4个步骤，并且每个视图都是全屏视图，位于 www.example.com/abcd 。当用户到达第4步时，如果用户单击浏览器的后退按钮，则应将用户带到表单的第3步，随后单击浏览器的后退按钮，则应将用户带到步骤2，依此类推。等等。约束条件是主体URL和路径名（www.example.com/abc）应该保持相同。向网址添加哈希是有效的选项。到目前为止，在阅读之后，我想到了两种可能的解决方案。

1。

window.addEventListener("popstate",e => {
  // nope,go back to your page
  this.props.history.go(1);
});

但是，这感觉非常hacky，并且肯定破坏了状态管理。我想到的另一个选项是将一组客户端路由包装到HashRouter中，将哈希值注入url中。 www.example.com/#/step1 ， www.example.com/#/step2 等类似内容。

如何在不影响服务器端渲染和渲染当前状态的情况下构造此要求。这就是我的Client.jsx看起来很漂亮

 <browserRouter>
     <ScrollToTop>
         <CookiesProvider>
             <App />
         </CookiesProvider>
      </ScrollToTop>
  </browserRouter>