每当我转到使用特定组件的路线时,react-loadable都会出现404错误

时间:2018-07-27 13:52:35

标签: javascript reactjs react-router

到目前为止,我一直在尝试对概念网站进行代码拆分,但是似乎无法正常工作。我有一个STLMain组件(STLMain.js):

import React from 'react';

export default () => (
  <div>
    STLMain
  </div>
);

在STLMainLoadable.js中使用了哪个:

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

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

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

然后在我的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>
);

每次我进入localhost:8080 / STLMain时,控制台都会出现两个错误:

1.GET http://localhost:8080/0.bundle.js 404(未找到)
 2.拒绝从“ http://localhost:8080/0.bundle.js”执行脚本,因为其MIME类型(“ text / html”)不可执行,并且启用了严格的MIME类型检查。

是的,我安装了语法动态导入babel插件。 我该怎么做才能解决此问题?

1 个答案:

答案 0 :(得分:1)

如果还没有,请尝试在output.publicPath = '/'中设置webpack.config.js

output: {
  ...
  publicPath: '/',
  ...
}

Credit where credit is due