当应用程序中断时,我试图将用户发送到通用错误页面,我正在尝试使用ErrorBoundary方法,然后呈现重定向。
export default class ErrorBoundary extends Component {
state = { has_error: false }
componentDidCatch(error, info)
this.setState({ has_error: true });
}
render() {
if (this.state.has_error)
return <Redirect to="/somewhere/else" />
}
return this.props.children;
}
};
Run Code Online (Sandbox Code Playgroud)
然后使用ErrorBoundary将所有路由和子组件包装在路由器内部
<Router history={history}>
<ErrorBoundary>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route
path="/createManager/:managerId"
component={CreateManager}
/>
<Route path="/login" component={LoginComp} />
<Route path="/test" component={Test} />
<Route path="/register" component={RegisterAccount} />
<Route component={NotFound} />
</Switch>
<Footer />
</ErrorBoundary>
</Router>
Run Code Online (Sandbox Code Playgroud)
永远不会触发componentDidCatch,因此,无论是在开发版还是产品版中,都永远不会离开当前错误页面。当应用中断或尝试引发错误时,如何将用户发送到X路由?
为了触发错误,我给一个组件留了一个空道具,然后单击以尝试使用应该在道具中传递的函数。