React应用关闭弹窗后需双击返回键，如何实现单次返回？

问题根源在于历史栈的记录逻辑：你打开弹窗时应该是用history.push()新增了一条带查询参数的历史记录，关闭弹窗时用history.replace()把这条记录替换成空查询参数的版本，这就导致历史栈里仍保留两条记录（原页面、替换后的空参数页面），所以返回键需要按两次才能回到更早的页面。

给你两种可行的解决方式：

方式一：打开弹窗时用replace而非push #

打开弹窗时直接替换当前历史记录，而非新增一条，这样历史栈始终只有一条记录：

// 打开弹窗时
const history = useHistory();
history.replace({ search: 'query=value' });

// 关闭弹窗时
history.replace({ search: '' });

如果原页面本身已有其他查询参数，不想被清空，可改用URLSearchParams精准修改：

// 打开弹窗时
const history = useHistory();
const params = new URLSearchParams(history.location.search);
params.set('query', 'value'); // 添加弹窗对应的参数
history.replace({ search: params.toString() });

// 关闭弹窗时
const params = new URLSearchParams(history.location.search);
params.delete('query'); // 仅移除弹窗对应的参数
history.replace({ search: params.toString() });

方式二：关闭弹窗时直接调用goBack #

如果打开弹窗时必须用push新增记录，那关闭时直接回退到上一条历史记录即可：

// 打开弹窗时
const history = useHistory();
history.push({ search: 'query=value' });

// 关闭弹窗时
history.goBack();

这种方式会直接让历史栈回到打开弹窗前的状态，返回键操作完全正常。

内容的提问来源于stack exchange，提问作者Abdel-Rahman