当用户单击浏览器 React Js 中的后退按钮时关闭模式

Question

如果用户通过手机访问网站，我将向用户展示一个占据整个屏幕的模式。 用户倾向于本能地单击手机上的后退按钮，而不是使用模式上提供的关闭按钮。

有没有办法拦截用户单击后退按钮时触发的 function？ 我想在用户单击手机上的后退按钮时关闭模式，而不是让他们重定向到上一页。

Answer 1

使用历史 API 。 如何实现这一点的一个例子是：

//listen for state changes
window.onpopstate = (event) => 
{
   if (!event.state.modalOpened)
   {
     closeModal()
   }
}

//change the actual page state so it contains the modalOpened property
window.history.replaceState({modalOpened: false})

function openModal(content) 
{
    //push new state, put the modal information in the state object, this will push a new state, when the user presses the back button, the browser will just trigger the onpopstate event, instead of going to the previous page
    window.history.replaceState({modalOpened: true})

    //this is any code you use to open your modal, for example
    ReactDOM.render(<Modal>{content}</Modal>, document.getElementById("moda-container")
}