如何解决这个错误,尝试导入错误:'./ErrorFallback'不包含默认导出(导入为'ErrorFallback')?这是源https://codesandbox.io/s/react-lazy-cdv8q?file=/src/App.js,我只想修复我在刷新页面时遇到 404 not found
import ErrorFallback from "./ErrorFallback";
class App extends Component {
render() {
return (
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Router>
<ErrorBoundary FallbackComponent={ErrorFallback}>
<React.Suspense fallback={<div>Loading...</div>}>
<Switch>
<Route exact path="/" component={Login} name="Login Page" render={props => <Login {...props}/>} />
<Route path="/register" component={Register} name="Register Page" render={props => <Register {...props}/>} />
<Route name="Home" render={props => <TheLayout {...props}/>} />
</Switch>
</React.Suspense>
</ErrorBoundary>
</Router>
</MuiPickersUtilsProvider>
);
}
}
export default App;
// 这是 ErrorFallback.js
import React, { useEffect } from "react";
import { getWithExpiry, setWithExpiry } from "./storage";
export function ErrorFallback({ error }) {
// Handles failed lazy loading of a JS/CSS chunk.
useEffect(() => {
const chunkFailedMessage = /Loading chunk [\d]+ failed/;
if (error?.message && chunkFailedMessage.test(error.message)) {
if (!getWithExpiry("chunk_failed")) {
setWithExpiry("chunk_failed", "true", 10000);
window.location.reload();
}
}
}, [error]);
return (
<div>
<p>Something went wrong.</p>
<pre>{error?.message}</pre>
</div>
);
}
这是 storage.js
export function setWithExpiry(key, value, ttl) {
const item = {
value: value,
expiry: new Date().getTime() + ttl
};
localStorage.setItem(key, JSON.stringify(item));
}
export function getWithExpiry(key) {
const itemString = window.localStorage.getItem(key);
if (!itemString) return null;
const item = JSON.parse(itemString);
const isExpired = new Date().getTime() > item.expiry;
if (isExpired) {
localStorage.removeItem(key);
return null;
}
return item.value;
}