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"]
}

希望能帮助到你