React 基於路由的代碼拆分導入 Unexpected token 錯誤

Question

import React, {Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const HomePage = lazy(() => import('../../layouts/Home/Home'));
const Routes = () => (
            <Router>
              <Suspense fallback={<div>Loading...</div>}>
                <Switch>
                  <Route exact path="/" component={HomePage}/>
                </Switch>
              </Suspense>
            </Router>
        );
export default Routes;

在此處輸入圖像描述

我已經創建了反應項目並使用反應延遲導入不起作用導入 class 組件。

請幫我。

Answer 1

查看這篇文章它解釋了如何使用 react-router 的延遲加載

由於 bable 問題，該錯誤看起來像是導入令牌有問題

嘗試使用 require 而不是 import

例子

import React, { Suspense, lazy } from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
const HomePage = lazy(() => Promise.resolve(require("../../layouts/Home/Home")));
const Routes = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={HomePage} />
      </Switch>
    </Suspense>
  </Router>
);
export default Routes;

render(<Routes />, document.getElementById("root"));

Answer 2

我認為您需要添加插件才能使用動態導入

可以使用npm來安裝

npm install -D babel-plugin-syntax-dynamic-import

然后將其添加到 your.babelrc 作為

{
"presets": ["env", "react"],
"plugins": ["syntax-dynamic-import"]
}

希望能幫助到你