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

Question

我试图弄清楚/如果我在另一个带有 route 的页面中出现错误，如何定向到我的主页/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（并且主页没有使用 route 呈现/。为什么会发生这种情况？任何人都可以帮助理解原因。谢谢。

Answer 1

您可以尝试使用来自react-router. 在你的 if 块内而不是返回Router，你可以返回

<Redirect to="/" />

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