React路由场景下点击浏览器返回如何恢复非路由内的Overlay弹窗

核心逻辑是利用路由历史栈的state特性存储浮层展示标记，不需要修改实际URL路径，就能实现浮层状态被历史记录感知：

实现步骤 #

1. 根组件改造：将浮层显示状态和路由状态绑定
   不再用单独的全局变量控制isVisible，直接从路由的location.state中读取浮层标记：

import { useLocation } from 'react-router-dom'
const App = () => {
    const location = useLocation()
    // 从路由状态中读取浮层展示标记
    const isVisible = location.state?.showOverlay === true

    return (
        <>
            <Switch>
                <Route path="/products">
                    <AllProducts />
                </Route>
                <Route path="/teams">
                    <AllTeams />
                </Route>
                <Route exact path="/">
                    <Home />
                </Route>
            </Switch>
            {isVisible && (
                <Overlay />
            )}
        </>
    );
};

2. 浮层打开逻辑改造：打开时主动新增历史记录
   Home组件内点击打开浮层的按钮时，不要直接修改状态，而是通过路由方法新增一条路径不变、携带浮层标记的历史记录：

// react-router v6 示例，v5可替换为useHistory的push方法
import { useNavigate } from 'react-router-dom'
const Home = () => {
    const navigate = useNavigate()
    const handleOpenOverlay = () => {
        // 路径保持为/，仅在state中添加浮层标记，新增一条历史记录
        navigate('/', { state: { showOverlay: true } })
    }
    return <button onClick={handleOpenOverlay}>打开浮层</button>
}

3. 浮层关闭逻辑改造：关闭时回退历史记录
   Overlay组件的关闭按钮触发时，不要直接隐藏浮层，而是调用回退方法，移除之前新增的那条带浮层标记的历史记录：

import { useNavigate } from 'react-router-dom'
const Overlay = () => {
    const navigate = useNavigate()
    const handleClose = () => {
        // 回退一条历史，刚好删除带showOverlay标记的记录
        navigate(-1)
    }
    return <div className="overlay" onClick={handleClose}>浮层内容</div>
}

效果说明 #

此时历史栈的变化符合预期：

• 首次进入首页：历史栈为[ 原始/（无state） ]，浮层隐藏
• 点击打开浮层：历史栈变为[ 原始/，带showOverlay=true的/ ]，浮层显示
• 跳转至/teams页面：历史栈变为[ 原始/，带showOverlay=true的/，/teams ]，浮层隐藏
• 点击浏览器返回：回到带showOverlay=true的/，浮层自动展示
• 再次点击返回：回到原始/，浮层隐藏

内容的提问来源于stack exchange，提问作者TheRoyality