fix(ui): ErrorBoundary bei Navigation resetten — v1.2.70
ErrorBoundary lag in main.tsx außerhalb des Routers und hatte keinen
Zugriff auf useLocation. Einmal gecatchter Fehler blieb erhalten bis
zum nächsten Reload — daher "EdgeGuard konnte nicht laden" bei
Navigation zum Dashboard.
Fix: LocationKeyBoundary-Wrapper innerhalb des BrowserRouter mit
key={pathname} — React remountet die ErrorBoundary bei jedem
Routenwechsel und löscht damit den Error-State automatisch.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
|||||||
import { Suspense, lazy, useEffect, type ReactNode } from 'react'
|
import { Suspense, lazy, useEffect, type ReactNode } from 'react'
|
||||||
import { BrowserRouter, Navigate, Route, Routes, useLocation } from 'react-router-dom'
|
import { BrowserRouter, Navigate, Route, Routes, useLocation } from 'react-router-dom'
|
||||||
|
import ErrorBoundary from './components/ErrorBoundary'
|
||||||
import { ConfigProvider, Spin } from 'antd'
|
import { ConfigProvider, Spin } from 'antd'
|
||||||
import deDE from 'antd/locale/de_DE'
|
import deDE from 'antd/locale/de_DE'
|
||||||
import enUS from 'antd/locale/en_US'
|
import enUS from 'antd/locale/en_US'
|
||||||
@@ -110,6 +111,7 @@ export default function App() {
|
|||||||
<QueryClientProvider client={queryClient}>
|
<QueryClientProvider client={queryClient}>
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<SetupGate>
|
<SetupGate>
|
||||||
|
<LocationKeyBoundary>
|
||||||
<Suspense fallback={<div className="loader-center"><Spin size="large" /></div>}>
|
<Suspense fallback={<div className="loader-center"><Spin size="large" /></div>}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route path="/setup" element={<SetupPage onComplete={(u: SessionUser) => useAuthStore.getState().set(u)} />} />
|
<Route path="/setup" element={<SetupPage onComplete={(u: SessionUser) => useAuthStore.getState().set(u)} />} />
|
||||||
@@ -148,9 +150,17 @@ export default function App() {
|
|||||||
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
<Route path="*" element={<Navigate to="/dashboard" replace />} />
|
||||||
</Routes>
|
</Routes>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
</LocationKeyBoundary>
|
||||||
</SetupGate>
|
</SetupGate>
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</QueryClientProvider>
|
</QueryClientProvider>
|
||||||
</ConfigProvider>
|
</ConfigProvider>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Resets the ErrorBoundary on every route change so a render error on
|
||||||
|
// one page never permanently blocks navigation to another page.
|
||||||
|
function LocationKeyBoundary({ children }: { children: ReactNode }) {
|
||||||
|
const { pathname } = useLocation()
|
||||||
|
return <ErrorBoundary key={pathname}>{children}</ErrorBoundary>
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user