错误边界与react-router-dom包中的errorElement

Question

我现在正在学习如何使用react-router-dom。我刚刚在函数中遇到了errorElementprop createBrowserRouter，我完全理解errorElementprop 是如何工作的，但我不明白什么时候应该选择错误边界而不是errorElement。它们可以执行相同的任务，但我应该更多地使用什么，为什么？

Answer 1

根据文档，errorElement：

errorElement

当加载器抛出异常时，动作<Route element>，将渲染错误路径 ()，而不是路由 () 的正常渲染路径，<Route errorElement>并且错误将通过useRouteError.

此功能仅在使用数据路由器（例如 createBrowserRouter

该Route组件errorElement对于在处理路由的加载器或操作函数期间或在渲染路由组件时抛出错误的特定情况非常有用，并且您可以渲染更具体和有用的 UI，而常规 React错误边界更适合意外错误。您可以缩小 React 错误边界的范围以显示特定的 UI，但这样做的好处errorElement是更容易使用 API 抽象。您不需要在自定义错误边界组件（仅限 React 类组件）中自己实现捕获/处理逻辑，而是可以使用钩子useRouteError来访问引发的错误，并且可以更多地关注 UI。

如果您正在使用react-router数据路由器和路由，以及路由加载器和操作，那么使用errorElement似乎是相当清晰和明显的选择。