reactjs - 在错误边界中包装多个 react-router 路由
问题描述
如何将一个或多个路由包装在错误边界组件中?我正在使用 React 版本 16 并尝试将两条路由包装在错误边界中,但遇到了一些意外行为。
我根本没有收到任何错误消息 - 但一个组件有时不会挂载。
当使用同一个子组件(表单)在两条路由之间切换时,父组件根本不会更新或挂载。但是,Web 浏览器位置栏中的 URL 会正确更新。(我使用相同的子组件进行添加/编辑,但使用不同的道具)
这是错误边界的问题吗?我需要以某种方式指导它吗?
我已阅读 reactjs.org 上的文档,但找不到有关我的问题的任何信息。我是否错过了 ErrorBoundary 应该如何工作?
如果您能引导我朝着解决此问题的正确方向前进,我会很高兴。
请参阅下面的简单代码示例。
export const history = createHistory();
const AppRouter = () => (
<Router history={history}>
<div>
<PrivateRoute component={Header} />
<Switch>
<PrivateRoute path="/dashboard" component={DashboardPage} />
<ErrorBoundary key="eb01">
<PrivateRoute path="/category/edit_category/:id" component={EditCategoryPage} exact={true} />
</ErrorBoundary>
<ErrorBoundary key="eb02">
<PrivateRoute path="/create_category" component={AddCategoryPage} exact={true} />
</ErrorBoundary>
</Switch>
</div>
</Router>
);
错误边界组件
import React from 'react';
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { error: null, errorInfo: null };
const { history } = props;
history.listen((location, action) => {
if (this.state.hasError) {
this.setState({
hasError: false,
});
}
});
}
componentDidCatch(error, errorInfo) {
// Catch errors in any components below and re-render with error message
this.setState({
error: error,
errorInfo: errorInfo
})
// You can also log error messages to an error reporting service here
}
render() {
if (this.state.errorInfo) {
// Error path
return (
<div>
<h2>Something went wrong</h2>
<details style={{ whiteSpace: 'pre-wrap' }}>
{this.state.error && this.state.error.toString()}
<br />
{this.state.errorInfo.componentStack}
</details>
</div>
);
}
// Normally, just render children
return this.props.children;
}
}
export default ErrorBoundary;
更新
我还尝试将组件(而不是路由)包装在ErrorBoundary 组件中。
<PrivateRoute path="/category/edit_category/:id"
render={() => (
<ErrorBoundary>
<EditCategoryPage/>
</ErrorBoundary>
)}
exact={true}/>
我现在收到一个错误(组件已正确导入 - 我可以在同一文件的其他地方使用它们)
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
解决方案
我已经将 React-Router 包装在我自己的组件中。这就是为什么我的代码不起作用!哦!
在正确的位置(我自己的组件)添加 ErrorBoundary 时,一切都按预期工作。:)
export const PrivateRoute = ({
isAuthenticated,
component: Component,
useErrorBoundary,
...rest
}) => (
<Route {...rest} component = {(props) => (
isAuthenticated ? (
(useErrorBoundary) ?
<div>
<ErrorBoundary>
<Component {...props} />
</ErrorBoundary>
</div>
:
<div>
<Component {...props} />
</div>
) : (
<Redirect to="/" /> //redirect if not auth
)
)
}/>
);
推荐阅读
- python - 列表列表的Python二分法
- html - 调整上传按钮与其他上传按钮位于同一列?
- tar - 如何防止在 tf.keras.utils.get_file() 解压后创建点下划线“._”文件
- discord - 为什么我收到“TypeError:无法读取未定义的属性‘发送’”?
- javascript - IEX Cloud:如何获取某只股票从某个日期到当前日期的历史每日价格
- go - 创建一个特定类型的数组并重用它
- exception - 如何重新创建 NoRouteToHostException 场景?
- css - 使用 CSS 修改滚动条 - Chrome 有效,Safari 无效
- wordpress - 控制台浏览器说它找不到我的网站上不存在的请求图像
- python - Mailgun 复杂的电子邮件使用 python 内联发送图像