React ErrorBoundary - 如何在另一个路由组件出错时路由到组件/主页答案

【问题标题】：React ErrorBoundary - How to route to a component/homepage upon error in another route componentReact ErrorBoundary - 如何在另一个路由组件出错时路由到组件/主页
【发布时间】：2021-01-31 01:49:20
【问题描述】：

如果我在路由/results 的另一个页面中出现错误，我试图弄清楚如何定向到我的主页/。我能够使用包含在我的组件中的 ErrorBoundary 重定向到我的主页，但路由没有改变，它立即恢复到相同的错误。（我基本上是想在出现错误时显示主页）

我尝试使用react-router-dom 并在 ErrorBoundary 组件处渲染函数，如下所示：

    render() {
    if (this.state.hasError) {
      return (
        <Router>
            <Switch>
                <Route path="/" exact component={MyHomePage} />
            </Switch>
            
        </Router>);
    } else {
      return this.props.children;
    }
  }

但是再次出现错误，路线保持不变/results（并且主页没有使用路线/呈现。为什么会发生这种情况？谁能帮助理解原因。谢谢。

【问题讨论】：

标签： reactjs react-router react-error-boundary

【解决方案1】：

您可以尝试使用来自react-router 的重定向组件。在你的 if 块内而不是返回 Router 你可以返回

<Redirect to="/" />

Router and Switch 基本上匹配浏览器 URL 并导航，但在您的情况下，您希望根据条件以编程方式导航，因此 Redirect 更适合此处。

【讨论】：