Javascript 无论何时我转到使用特定组件的路由，react loadable都会给出一个404错误

到目前为止，我一直试图对我的概念网站进行代码拆分，但似乎不起作用。我有一个STLMain组件（STLMain.js）：

从“React”导入React；
导出默认值（）=>(
STLMain
);

在STLMainLoadable.js中使用：

import React from 'react';
import Loadable from 'react-loadable';

const loading = () => (
  <div>
    Loading...
  </div>
);

export default Loadable({
  loader: () => import('./STLMain'),
  loading
});

从“React”导入React；
从“react Loadable”导入Loadable；
常量加载=（）=>(
加载。。。
);
导出默认可加载的({
加载程序：（）=>import（'./STLMain'），
加载
});

然后在我的Router.js中使用

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './main_pages/Home';
import NotFound from './main_pages/NotFound';
import STLMainLoadable from './main_pages/STLMainLoadable';
import Navigation from './navigation/Navigation';

export default () => (
  <BrowserRouter>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/STLMain" component={STLMainLoadable} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/main_pages/Home”导入主页；
从“/main_pages/NotFound”导入NotFound；
从“/main_pages/STLMainLoadable”导入STLMainLoadable；
从“./Navigation/Navigation”导入导航；
导出默认值（）=>(
);

每次转到localhost:8080/STLMain时，控制台中都会出现两个错误：

1.GET 404（未找到）
2.拒绝从“”执行脚本，因为其MIME类型（'text/html'）不可执行，并且启用了严格的MIME类型检查

是的，我已经安装了语法动态导入巴别塔插件。

---

我可以做些什么来修复此问题？

如果您还没有，请尝试在

webpack.config.js

中设置

output.publicPath='/'

：

输出：{
...
公共路径：“/”，
...
}

---

似乎代码拆分工作正常，您可能在为资源提供服务时遇到了问题。尝试直接在浏览器中加载（或使用任何名称）。我认为您没有提供JavaScript。您使用的是Thread dev服务器还是？我使用的是webpack dev server，如果我转到它，它会说：“无法获取/0.bundle.js”是的，它可以工作，但不是根publicPath:“/”你必须写下一个url，你的静态文件由你的服务器提供。在我的例子中，它是“/static/js”

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Home from './main_pages/Home';
import NotFound from './main_pages/NotFound';
import STLMainLoadable from './main_pages/STLMainLoadable';
import Navigation from './navigation/Navigation';

export default () => (
  <BrowserRouter>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route exact path="/STLMain" component={STLMainLoadable} />
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);