react路由懒加，项目经常上线导致没有刷新的用户出现js文件加载失败： ChunkLoadError: Loading chunk 42 failed.

react路由懒加，项目经常上线导致没有刷新的用户出现js文件加载失败： ChunkLoadError: Loading chunk 42 failed.

解决方案：

使用错误边界：

import React, { Component } from 'react'//错误边界//default class ErrorBoundary extends Component { constructor(props) { super(props); this.state = { error: null, errorInfo: null }; } 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 (

在路由处使用错误边界：

import React, { Suspense, lazy } from 'react'import { connect } from 'react-redux'import { Switch, Route, Redirect, useHistory, withRouter,} from 'react-router-dom'//自己开发的公共组件会再此处全部引入import { ErrorBoundary, Loading } from '../components/light'const Login = lazy(() => import('../views/light/login/Login'))const SaleLogin = lazy(() => import('../views/sale/login/Login'))const EduLogin = lazy(() => import('../views/edu/login/Login'))const ProducerLogin = lazy(() => import('../views/producer/login/Login'))const Index = lazy(() => import('../views/light/index/Index'))const NotFound = lazy(() => import('../views/light/notFound/NotFound'))function Router({ extraRouter }) { window.reactRouter = useHistory() return ( <> }> {extraRouter.toJS().map((item) => ( ))} )}const mapStateToProps = (state) => { return { extraRouter: state.getIn(['light', 'extraRouter']), }}const mapDispatchToProps = (dispatch) => { return { onSetState(key, value) { dispatch({ type: 'SET_LIGHT_STATE', key, value }) }, onDispatch(action) { dispatch(action) }, }}export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Router))

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。