我正在使用react-router-dom，我想要的是能够在我单击浏览器后退按钮时关闭模态框。
另外，在我的场景中，模态组件不是Switch 的一部分。那么如何关闭模态框。
提前致谢。 :)
【问题讨论】：
标签： html reactjs dom react-router-v4 react-router-dom
我制作了一个名为 useAppendLocationState 的简单钩子，它可以完成所有工作：
function SomeComponent() {
const [showModal , appendShowModal ] = useAppendLocationState('showModal');
return (
<div>
<div>...some view...</div>
<button onClick={() => appendOpenModal(true)}>open modal</button>
{showModal && <SomeModal closeHandler={() => window.history.back()} />}
</div>
)
}
useAppendLocationState 像useState一样返回一个包含两个条目的数组，第一个条目是来自浏览器位置状态的状态属性值，第二个条目是推送新项目的方法浏览器历史记录，将新的状态道具附加到当前位置状态。
这是我们的useAppendLocationState 定义：
import { useHistory } from 'react-router';
export function useAppendLocationState(key) {
if (!key) throw new Error("key cannot be null or empty value")
const history = useHistory()
const currentLocationState = history.location.state;
const appendStateItemValue = (value) => {
const newLocationState = { ...currentLocationState }
newLocationState[key] = value;
history.push(history.location.pathname, newLocationState)
}
const stateItemValue = history.location.state && history.location.state[key]
return [stateItemValue, appendStateItemValue]
}
export default useAppendLocationState
【讨论】：
您可能会使用类似的方法来检测“返回”按钮的按下情况。
componentDidUpdate() {
window.onpopstate = e => {
}
}
然后，根据您的模式（Bootstrap 或其他），您可以调用 .hide() 或 .close()。
【讨论】：
您是否尝试过：ComponentWillUnmount？
【讨论】：