3

我们App.js在 React 中有一个文件，我想添加一个包含大多数路由的错误边界。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>
    )
}

我们正在尝试使用 1ErrorBoundary将所有路由包装在<switch>. 请注意，交换机中的最后一个路由是一个NoMatch组件，如果其他路由都没有渲染，则该组件会渲染。如果我尝试渲染ErrorBoundary内部<Switch>，如下所示：

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

然后由于某种原因，NoMatch组件总是呈现。如果我将NoMatchRoute 向下拖动一行（在 下方</ErrorBoundary>），则NoMatchRoute 永远不会渲染（即使它应该渲染）。另一方面，如果我环绕</ErrorBoundary>整个<Switch>：

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

..然后 theErrorBoundary和 theNoMatch两者似乎都有效。我的问题是 - 最后一个代码块是在单个 ErrorBoundary 内的 React App.js 文件中包装多个路由的正确方法吗？

编辑：我知道将所有这些路由包装在单个错误边界内需要权衡取舍。对于这种情况，我可以接受这种权衡，并且单个错误边界是设计使然（目前）。

4

0 回答 0