Javascript 已调用反应错误边界，但未呈现

我创建了一个错误边界，将应用重定向到

/error

路径。但是，有时当触发错误时（在codesandbox中，通过单击bug页面的链接），会调用我的错误边界，并将浏览器重定向到

/error

路径，但应在

/error

上显示的组件不会显示/呈现，而我只看到一个白色屏幕。错误是什么？为什么会调用错误边界，使其重定向浏览器，但渲染未完成？谢谢

index.js:

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Switch，Route，Link}；
从“react dom”导入{render}；
从“/ErrorBoundary”导入ErrorBoundary；
导入“/index.css”；
常量应用=（）=>(


家


有Bug的页面


);
const HomePage=（）=>主页；
const ErrorPage=（）=>这是错误边界；
常量错误页=（）=>{
常数dummyData={
傅：{
身份证号码：1
}
};
返回{dummyData.bar.id}；
};
康斯特水疗中心=（）=>(
);
render（，document.getElementById（“根”））；

errorBoundary.js:

import*as React from“React”；
从“react router dom”导入{withRouter}；
导出类ErrorBoundary扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
错误：错，
已重定向：false
};
}
componentDidCatch（错误）{
this.setState（{hasError:true}）；
}
render（）{
if（this.state.hasError）{
this.props.history.push（“/error”）；
}
返回此.props.children；
}
}
使用路由器导出默认值（ErrorBoundary）；

我只需要使用

componentDidCatch（）

调用您的re direct，即

componentDidCatch(error) {
  this.props.history.push('/error');
}

我不完全确定在

render（）

中调用这样的函数是否有效，但您也可以这样做：

render() {
  return this.state.hasError ? <SomeErrorComponent /> : this.props.children;
}

render（）{
返回this.state.hasError？：this.props.children；
}

您可以使用

组件didcatch（）

调用

this.props.history.push（'/error'）

？@Anthony，这成功了！介意把帖子作为答案，这样我可以给你分数和积分吗？