Question

我有一个使用webpack的React应用程序。我已经添加了React Router 3，当我尝试在我的应用程序中访问路由时，除了初始路由之外，我在.JS文件上获得了404。

我的应用程序也在使用基本名称，因为我必须在应用程序路径前添加。

路线

import React from 'react'
import Loadable from 'react-loadable'
import { Router, Route, IndexRoute, IndexRedirect } from 'react-router'
import App from './components/App'

const AsyncRoute = loader =>
  Loadable({
    loader,
    loading: () => <h3>Loading...</h3>,
    delay: 300,
  })

const LandingPage = AsyncRoute(() => import(/* webpackPrefetch: true, webpackChunkName: "landingPage" */ './containers/LandingPage'))

export default ({ history }) => (
  <Router history={history}>
    <Route path="/:tenant" component={App}>
      <IndexRoute component={LandingPage} />
      <Route path="foo" component={LandingPage} />
    </Route>
  </Router>
)

索引

import React, { Fragment } from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { useRouterHistory } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import createBrowserHistory from 'history/lib/createBrowserHistory'

import store from './store'
import Router from './routes'

const historyConfig = { basename: '/content-manager' }
const browserHistory = useRouterHistory(createBrowserHistory)(historyConfig)
const history = syncHistoryWithStore(browserHistory, store)

render(
  <Provider store={store}>
    <Fragment>
      <Router history={history} />
    </Fragment>
  </Provider>,
  document.getElementById('root')
)

Webpack.dev

const PORT = process.env.SERVER_PORT || 3000
const HOST = process.env.SERVER_HOST || '127.0.0.1'

module.exports = {
  devtool: 'inline-source-map',
  mode: 'development',
  output: {
    filename: '[name].[hash].js',
    publicPath: '',
  },
  devServer: {
    host: 'localhost',
    port: process.env.PORT || 3200,
    historyApiFallback: true,
    hot: false,
    open: true,
    proxy: {
      '/api/**': {
        target: `http://${HOST}:${PORT}`,
        pathRewrite: { '^/api': '' },
        secure: false,
        logLevel: 'debug',
      },
    },
  },
}

Webpack.common

const commonPaths = require('../common-paths');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: commonPaths.appPath,
  entry: ['babel-polyfill', './index.jsx'],
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  module: {
    rules: [
      { test: /\.(jsx?)$/, exclude: /node_modules/, use: ['babel-loader'] },
    ],
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          chunks: 'initial',
          test: 'vendor',
          name: 'vendor',
          enforce: true,
        },
      },
    },
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Web App',
      template: commonPaths.projectRoot + '/public/index.html',
      inject: 'body',
    }),
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.js$|\.css$/,
      threshold: 10240,
      minRatio: 0.8,
      deleteOriginalAssets: process.env.NODE_ENV === 'prod',
    }),
    new Dotenv(),
  ],
};

如果我在浏览器中访问http://app.local/content-manager/foo，则会加载着陆页。

如果我然后尝试并导航到http://app.local/content-manager/foo/edit应用程序无法加载，我在控制台中看到以下内容

GET http://app.local/content-manager/foo/main.fdb34ff55bc02a8cd347.js 404 (Not Found)
edit:1 Refused to execute script from 'http://app.local/content-manager/foo/main.fdb34ff55bc02a8cd347.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我相信初始路线，它试图在http://app.local/content-manager找到js捆绑但是当我移动到子路线时它正在寻找http://app.local/content-manager/foo

Answer 1

所以我添加了

<base href="/content-manager/" />

进入我的index.html，现在似乎工作....

无法在React中加载路径上的JS包

1 个答案: