在Brave浏览器中使用window.navigator.onLine检测网络始终返回true的问题

核心问题：未监听网络状态变化 #

你的代码里const online = window.navigator.onLine只会在组件初始化时获取一次网络状态，后续网络变化不会自动更新这个变量，导致useEffect的依赖项无法触发更新。要解决这个问题，需要监听online和offline事件来实时同步状态。

修正后的React代码 #

import { useState, useEffect } from 'react';

function App() {
  const [isOnline, setIsOnline] = useState(window.navigator.onLine);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // 组件卸载时移除监听，避免内存泄漏
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  useEffect(() => {
    if (!isOnline) {
      console.log("Connection lost!");
    }
  }, [isOnline]);

  return (
    <div className="App">
      {/* 离线时显示提示 */}
      {!isOnline && <p>connection lost</p>}
    </div>
  );
}

export default App;

Brave浏览器的特殊注意事项 #

基于Chromium的Brave浏览器可能因隐私设置影响navigator.onLine的准确性：

• 检查是否开启了Shields中的严格跟踪保护，部分极端设置可能干扰网络状态检测
• 测试时优先使用浏览器开发者工具的Network面板切换到"Offline"模式，这比单纯断开WiFi更可靠，能确保触发浏览器的离线状态检测
• 确认浏览器未手动开启"离线模式"（可通过地址栏右侧网络图标查看）

navigator.onLine的局限性 #

window.navigator.onLine并非100%精准：

• 它仅能检测浏览器是否能访问本地网络，无法判断是否能连接到互联网（比如本地网络正常但路由器断网）
• 若需要更准确的互联网连通性验证，可以定期请求一个无副作用的资源（如小图标、静态API接口）来确认网络状态

内容的提问来源于stack exchange，提问作者Islam Y-