尝试导入错误:“./ErrorFallback”不包含默认导出(导入为“ErrorFallback”)

时间:2021-07-30 14:34:36

标签: reactjs

如何解决这个错误,尝试导入错误:'./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;
  }

0 个答案:

没有答案