React Error Boundary回退UI无响应：按钮点击无效问题求助

1. 误用浏览器回退而非Error Boundary重置方法 #

你的回退组件里用了window.history.back()，这不是Error Boundary的正确重置方式。Error Boundary提供的resetErrorBoundary方法才是用来重置错误状态、让子组件重新渲染的正确手段。直接回退浏览器历史不会触发Error Boundary的状态重置，可能导致UI无响应。

修改回退组件代码：

const ErrorBoundaryFallbackComponent = ({ error, resetErrorBoundary }) => {
  return (
    <div id="__layout">
      <button onClick={resetErrorBoundary}>Try again</button>
    </div>
  )
}

export default ErrorBoundaryFallbackComponent

2. Suspense与Error Boundary嵌套顺序错误 #

你把Error Boundary放在了Suspense内部，这会导致Suspense无法正确捕获Error Boundary覆盖范围外的错误，甚至阻塞Error Boundary的正常工作。正确的嵌套顺序应该是让Error Boundary包裹Suspense，确保所有异步加载和子组件的错误都能被捕获：

修改Index.js代码：

import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
import App from './app/Index'
import { Spinner } from 'components'
import FallbackUi from 'components/ErrorBoundaryFallbackComponent'
import { ErrorBoundary } from 'react-error-boundary'

ReactDOM.render(
  <ErrorBoundary
    FallbackComponent={FallbackUi}
    resetKeys={[window.location.pathname]}
  >
    <Suspense fallback={<Spinner />}>
      <App />
    </Suspense>
  </ErrorBoundary>,
  document.getElementById('root'),
)

3. resetKeys依赖的history未正确引入 #

原代码中resetKeys={[history.location.pathname]}的history没有明确引入，会导致全局找不到该对象引发隐性错误。可以直接换成window.location.pathname，或者正确引入路由库的history实例。

额外检查项 #

• 确保react-error-boundary是最新版本，旧版本可能存在兼容性问题
• 确认错误是在Error Boundary包裹的子组件范围内抛出的

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