bugfix> reactjs > 投稿

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 で探しています