将整个应用包装在单个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 (将#修改为@）

react-error-boundary reactjs reactjs reactjs reactjs