从外部网站重定向回站点时useEffect失效，如何触发WebSocket连接？

我的站点逻辑是用户在外部网站输入代码后，重定向回本站页面。但根组件中用于建立WebSocket连接的空依赖useEffect，在重定向返回后并未执行，导致WebSocket无法正常连接。相关代码如下：

useEffect(() => {
        console.log('useEffect') 
        webSocket.current = new WebSocket(URL_WEB_SOCKET);
        webSocket.current.onopen = () => {
            console.log('opened')
        };

        return () => {
            if (webSocket.current) {
                webSocket.current.close();
            }
        };
    }, [])

解决方案 #

1. 监听路由变化触发useEffect #

空依赖的useEffect仅在组件首次挂载时执行，重定向返回时如果组件被路由缓存复用，就不会重新触发。可以通过监听路由信息，把它加入依赖数组：

import { useLocation } from 'react-router-dom';

// 组件内部
const location = useLocation();

useEffect(() => {
    console.log('useEffect triggered by route change') 
    webSocket.current = new WebSocket(URL_WEB_SOCKET);
    webSocket.current.onopen = () => {
        console.log('opened')
    };

    return () => {
        if (webSocket.current) {
            webSocket.current.close();
        }
    };
}, [location]) // 路由变化时重新执行useEffect

2. 抽离连接逻辑手动调用 #

把WebSocket连接的代码抽成独立函数，在组件挂载和重定向返回时手动触发：

const webSocket = useRef(null);
const URL_WEB_SOCKET = '你的WebSocket地址';

const connectWebSocket = () => {
    // 先关闭已有活跃连接
    if (webSocket.current?.readyState === WebSocket.OPEN) {
        webSocket.current.close();
    }
    // 建立新连接
    webSocket.current = new WebSocket(URL_WEB_SOCKET);
    webSocket.current.onopen = () => {
        console.log('opened')
    };
};

// 首次挂载时连接
useEffect(() => {
    connectWebSocket();
    return () => {
        if (webSocket.current) {
            webSocket.current.close();
        }
    };
}, []);

// 监听路由参数变化（重定向通常带参数），重新连接
const location = useLocation();
useEffect(() => {
    connectWebSocket();
}, [location.search]);

3. 处理浏览器BF Cache影响 #

部分浏览器在后退/前进时会使用BF Cache保存页面状态，导致组件不重新挂载。可以监听pageshow事件触发连接：

useEffect(() => {
    const handlePageShow = () => {
        // 检查连接状态，未连接则重新建立
        if (!webSocket.current || webSocket.current.readyState !== WebSocket.OPEN) {
            connectWebSocket();
        }
    };

    window.addEventListener('pageshow', handlePageShow);
    return () => {
        window.removeEventListener('pageshow', handlePageShow);
        if (webSocket.current) {
            webSocket.current.close();
        }
    };
}, []);

4. 强制根组件重新挂载 #

如果根组件被缓存（比如React.memo或第三方路由缓存组件），可以给组件添加唯一key，确保路由变化时重新挂载：

// 在路由配置中
import { Routes, Route, useLocation } from 'react-router-dom';
import App from './App';

const AppRouter = () => {
    const location = useLocation();
    return (
        <Routes>
            <Route 
                path="/*" 
                element={<App key={`${location.pathname}-${location.search}`} />} 
            />
        </Routes>
    );
};

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