Reactjs 将整个应用程序包装在单个错误边界中（反应错误边界）

我们在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>
    )
}

然后由于某种原因，

NoMatch

组件始终呈现。如果我将

NoMatch

路由向下拖动一行（在

下方），则

NoMatch

路由永远不会呈现（即使它应该呈现）。另一方面，如果我将

环绕整个

：

...

…然后，

ErrorBoundary

和

NoMatch

似乎都能工作。我的问题是-这最后一个代码块是否正确地将多个路由封装在单个ErrorBoundary内的React App.js文件中

---

编辑：我知道在一个错误边界内包装所有这些路由是有代价的。在这个例子中，我同意这种折衷，单一的错误边界是设计的（目前）。

你找到什么了吗？我也有一个类似的问题。是的，我几乎把ErrorBoundary都包起来了，只是为了有更广泛的ErrorBoundary覆盖范围。在某些时候，我可能会为其他组件设置更精确的错误边界。同样，非常感谢您的输入，@Canovice！

<React.Fragment>
    <Navbar />
    <Switch>
        <ErrorBoundary Fallback={ErrorFallback}>
            <Route exact path='/page1' component={comp1} />
            ...
            <Route component={NoMatch} />
        </ErrorBoundary>
    </Switch>
    ...

    <ErrorBoundary Fallback={ErrorFallback}>
        <Switch>
            <Route exact path='/page1' component={comp1} />
            ...
            <Route component={NoMatch} />
       </Switch>
    </ErrorBoundary>