如何使用 React Router 忽略特定错误的 ErrorBoundary？答案

【问题标题】：How to use React Router to ignore an ErrorBoundary for specific errors?如何使用 React Router 忽略特定错误的 ErrorBoundary？
【发布时间】：2020-03-21 07:56:14
【问题描述】：

我正在开发的应用程序使用错误边界，我对它很陌生。我们还使用 React Router，我想在出现一些特定错误的情况下使用它来重定向到主页（而不是直接跳入错误边界）。

例如，如果 datasetId 不存在，我想重定向到仪表板组件，但这种情况总是直接导致安装错误边界。我不确定如何“覆盖”它，或者在错误边界执行其操作之前捕获错误并重定向。

这里有一些相关的代码来说明这个例子：

路线：

const Dataset = () => {
  return (
    <Switch>
      <Route
        name="data-snapshot"
        path="/datasets/:datasetId/versions/:snapshotId"
        component={DatasetQuery}
      />
      <Route
        name="data-dataset"
        path="/datasets/:datasetId/"
        component={DatasetQuery}
      />
    </Switch>
  )
}

路由中的组件

const DatasetQuery = ({ match }) => (
  <ErrorBoundary error={error} subject={'error in dataset page'}>
    <DatasetHook
      datasetId={match.params.datasetId}
      draft={!match.params.snapshotId}
    />
  </ErrorBoundary>
)

还有一个错误边界：

const DatasetHook = ({ datasetId, draft }) => {
  const {
    data: { dataset },
    loading,
    error,
  } = useQuery(draft ? getDraftPage : getDatasetPage, {
    variables: { datasetId },
  })
  if (loading) {
    return <Spinner text="Loading Dataset" active />
  } else {
    if (error) Sentry.captureException(error)
    return (
      <ErrorBoundary error={error} subject={'error in dataset page'}>
        <DatasetQueryContext.Provider
          value={{
            datasetId,
          }}>
          <DatasetPage dataset={dataset} />
          <FilesSubscription datasetId={datasetId} />
        </DatasetQueryContext.Provider>
      </ErrorBoundary>
    )
  }
}

假设 datasetId 不存在，并且有人去了无效路线。如何重定向到不同的组件而不是加载错误边界？

【问题讨论】：

标签： reactjs error-handling jsx react-router-dom

【解决方案1】：

您可以在错误边界中利用回退 UI 功能，而不是尝试“覆盖”错误边界并手动处理重定向。

在您的 ErrorBoundary 组件中，检查抛出的错误是否来自数据集，并为其返回特定的 UI。示例可以参考 React 的文档：https://reactjs.org/docs/error-boundaries.html#introducing-error-boundaries

【讨论】：