动态导入在 netlify 中不起作用（reactjs）

Question

我正在尝试部署使用@babel/plugin-syntax-dynamic-import 的 reactjs 应用程序，该应用程序在我的本地主机上运行良好，但是当我将它部署在 netlify 上时，只有根 url 可以运行（例如: mysite.netlify.com), 所有其他 url 的 slug (ex: mysite.netlify.com/Visit) 不起作用，只是 returns 404 页面未找到即使我已经定义了路线并在我的本地主机上工作。

我的 .babelrc 文件中有以下设置

{
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

在我的 package.json

"dependencies": {
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    ...
}

我的 App.js

上有以下导入

import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route, Switch, Redirect } from 'react-router-dom';

const Photography = lazy(() => import('../Form1/Main.js'));
const Visit = lazy(() => import('../Form2/Main.js'));

有什么遗漏或者我需要让它在 netlify 上运行吗？

Answer 1

我认为这不是动态导入的问题 - 这是您的 Netlify 配置的问题。将 _redirects 文件添加到项目的 public 根目录。内容如下：

/*    /index.html   200

更多信息here

另一种方法是添加一个 netlify.toml 文件，但这更复杂并且会达到相同的结果。更多信息 here

动态导入在 netlify 中不起作用（reactjs）

Dynamic import not working in netlify (reactjs)

javascript

dynamic-import

reactjs

webpack

netlify