Browse Source

fix: offlineBanner uses getIntl() and inline network state

OfflineBanner is rendered inside rootContainer, which is the outermost
wrapper in Umi's provider chain. useModel('network') and useIntl()
require provider context (dataflowProvider, i18nProvider) that doesn't
exist at this level, causing runtime crashes. Switch to getIntl() (which
accesses the global intl singleton) and inline navigator.onLine state.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
pull/11756/head
afc163 5 months ago
parent
commit
15c25d79b2
  1. 21
      src/components/OfflineBanner/index.tsx

21
src/components/OfflineBanner/index.tsx

@ -1,9 +1,22 @@
import { useIntl, useModel } from '@umijs/max';
import { getIntl } from '@umijs/max';
import { Alert } from 'antd';
import { useEffect, useState } from 'react';
const OfflineBanner: React.FC = () => {
const { isOnline } = useModel('network');
const intl = useIntl();
const [isOnline, setIsOnline] = useState(
typeof navigator !== 'undefined' ? navigator.onLine : true,
);
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);
};
}, []);
if (isOnline) return null;
@ -12,7 +25,7 @@ const OfflineBanner: React.FC = () => {
type="warning"
banner
closable={false}
message={intl.formatMessage({ id: 'app.network.offline' })}
message={getIntl().formatMessage({ id: 'app.network.offline' })}
/>
);
};

Loading…
Cancel
Save