main.tsx 加全局错误处理 + #root 清空 + try-catch 包裹 createRoot. 解决 React 18.3.1 在空 #root 容器中误触发 hydration 警告导致 mount 失败.
This commit is contained in:
1 parent
45b6939ab3
commit
4cf910ee3e
2 files changed
+111
-7
No files matched your search
+29
-7
@@ -4,10 +4,32 @@ import { BrowserRouter } from 'react-router-dom';
|
||||
import App from './App';
|
||||
import './styles/global.css';
|
||||
|
||||
ReactDOM.createRoot(document.getElementById('root')!).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
// #961: 全局错误处理 + 防止 hydration mismatch
|
||||
window.addEventListener('error', (e) => {
|
||||
const root = document.getElementById('root');
|
||||
if (root && e.error) {
|
||||
console.error('[qihu-global-error]', e.error);
|
||||
}
|
||||
});
|
||||
window.addEventListener('unhandledrejection', (e) => {
|
||||
console.error('[qihu-unhandled-rejection]', e.reason);
|
||||
});
|
||||
|
||||
const rootEl = document.getElementById('root')!;
|
||||
// 清空避免 hydration mismatch
|
||||
rootEl.innerHTML = '';
|
||||
|
||||
try {
|
||||
ReactDOM.createRoot(rootEl).render(
|
||||
<React.StrictMode>
|
||||
<BrowserRouter>
|
||||
<App />
|
||||
</BrowserRouter>
|
||||
</React.StrictMode>
|
||||
);
|
||||
} catch (err) {
|
||||
console.error('[qihu-mount-error]', err);
|
||||
rootEl.innerHTML = '<pre style="padding:20px;color:#dc2626;font-family:monospace">React mount failed: ' + String(err) + '</pre>';
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user