如何解决将整个应用包装在单个ErrorBoundary反应错误边界中
我们在React中有一个App.js
文件,我想添加一个错误边界,该边界围绕大多数路由。 App.js文件大致如下所示:
import { ErrorBoundary } from 'react-error-boundary';
function ErrorFallback({ error }) {
return (
<div role='alert'>
<p>Something went wrong:</p>
<pre style={{ color: 'red' }}>{error.message}</pre>
</div>
);
}
function App() {
return (
<React.Fragment>
<Navbar />
<Switch>
<Route exact path='/page1' component={comp1} />
<Route exact path='/page2' component={comp2} />
<Route exact path='/page3' component={comp3} />
<Route exact path='/page4' component={comp4} />
<Route exact path='/page5' component={comp5} />
<Route exact path='/page6' component={comp6} />
<Route component={NoMatch} />
</Switch>
<Footer />
<React.Fragment>
)
}
我们正在尝试使用1 ErrorBoundary
将所有路由包装在<switch>
内。请注意,交换机中的最后一条路由是NoMatch
组件,如果没有其他路由呈现,则该组件将呈现。如果我尝试在ErrorBoundary
内部渲染<Switch>
,如下所示:
<React.Fragment>
<Navbar />
<Switch>
<ErrorBoundary Fallback={ErrorFallback}>
<Route exact path='/page1' component={comp1} />
...
<Route component={NoMatch} />
</ErrorBoundary>
</Switch>
...
然后出于某种原因,NoMatch
组件始终呈现。而且,如果我将NoMatch
路由向下拖动一行(在</ErrorBoundary>
之下),则NoMatch
路由将永远不会渲染(即使应该渲染)。另一方面,如果我将</ErrorBoundary>
包裹在整个<Switch>
上:
<ErrorBoundary Fallback={ErrorFallback}>
<Switch>
<Route exact path='/page1' component={comp1} />
...
<Route component={NoMatch} />
</Switch>
</ErrorBoundary>
..然后ErrorBoundary
和NoMatch
似乎都可以工作。我的问题是-这最后一个代码块是在单个ErrorBoundary内将Reacts.app.js文件中包装多个Route的正确方法吗?
编辑:我知道要折衷将所有这些路径包装在单个错误边界内。对于这种情况,我可以接受这种权衡,并且唯一的错误边界是设计使然(目前)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。