刷新后如何解决反应页面不起作用

Question

我有一个带有react-redux-firebase react-router和react-router-redux的react Web应用程序，但是当我执行页面刷新（其中URL包含参数）时

我收到此错误： 拒绝应用来自“ http://localhost:8080/courses/styles/app.c4b44f371d80b34c3fa1.css”的样式，因为它的MIME类型（'text / html'）不是受支持的样式表MIME类型，并且启用了严格的MIME检查。 GET http://localhost:8080/courses/vendor.js net :: ERR_ABORTED 404（未找到）

（刷新/ courses或/ home等其他路径也可以）

1-i尝试升级react-router，但这将导致更多工作，并且该过程并不直接，因此我放弃了这一点。 2-我用hashHistory替换了browserHistory，错误消失了，但我不喜欢现在的网址，而不是hashHistory的粉丝

项目层次结构

-webpack
-static
-src
--app
--index.html
---index.jsx
---store.jsx
--- themes
----jn 
----- components
----- pages
-----styles
--- core
----app.jsx

package.json

....
    "firebase": "^5.7.0",
"react": "^15.4.2",
    "react-redux": "^4.4.5",
    "react-redux-firebase": "^2.2.6",
    "react-router": "^2.4.0",
    "react-router-redux": "^4.0.5",
    "reduce-reducers": "^0.1.2",
    "redux": "^3.6.0",
    "redux-promise": "^0.5.3",
    "redux-react-firebase": "^2.6.1", 
....

这是我的webpack.config.js代码

require('dotenv').config();
const Path = require('path');
const Webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const WebpackVersionFilePlugin = require('webpack-version-file-plugin');

module.exports = {

  entry: {
    app: Path.resolve(__dirname, '../src/app/index.jsx'),
    vendor: [
      'history',
      'jquery',
      'lodash',
      'react',
      'react-dom',
      'react-ga',
      'react-helmet',
      'react-redux',
      'react-router',
      'react-router-redux',
      'redux',
      'redux-thunk'
    ]
  },
  output: {
    path: Path.resolve(__dirname, '../public'),
    publicPath: process.env.HOSTING_URL || '',
    filename: '[name].js'
  },
  resolve: {
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [{
      test: /.jsx?$/,
      use: 'eslint-loader',
      enforce: 'pre',
      include: Path.resolve(__dirname, '../src'),
      exclude: /node_modules/
    }, {
      test: /.jsx?$/,
      include: Path.resolve(__dirname, '../src/app'),
      use: 'babel-loader',
      exclude: /node_modules/
    }, {
      test: /\.css$/,
      use: [
        'style-loader',
        'postcss-loader',
        'css-loader'
      ],
      include: [/fonts/]
    },
    {
      test: /\.scss$/,
      use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: ['css-loader', 'sass-loader']
      })
    }, {
      test: /\.svg$/,
      loader: 'svg-sprite-loader',
      options: {
        runtimeCompat: true
      }
    }, // Font files
    {
      test: /\.(woff|woff2|ttf|otf)$/,
      loader: 'file-loader',
      include: [/fonts/],

      options: {
        name: '[hash].[ext]',
        outputPath: 'css/',
        publicPath: url => `../scc/${url}`
      }
    }
    ]
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new Webpack.HashedModuleIdsPlugin(), // so that file hashes don't change unexpectedly
    new ExtractTextPlugin({
      filename: 'styles/[name].[hash].css',
      disable: false,
      allChunks: true
    }),
    new WebpackVersionFilePlugin({
      packageFile: Path.join(__dirname, '../package.json'),
      template: Path.join(__dirname, '../version.ejs'),
      outputFile: Path.join(__dirname, '../static/version.json')
    })
  ]
};

webpack.config.dev.js

require('dotenv').config();
const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const Path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Webpack = require('webpack');


module.exports = merge(baseConfig, {
  mode: 'development',

  devtool: 'source-map',
  devServer: {
    contentBase: Path.resolve(__dirname, '../'),
    hot: true,
    inline: true,
    historyApiFallback: true
  },
  module: {
    rules: [
      { test: /\.(jpe?g|png|gif)$/,
        use: ['file-loader', 'image-webpack-loader']
      },
      {
        test: /\.woff2?(\?v=\d+\.\d+\.\d+)?$/,
        use: ['file-loader?name=[name].[ext]']
      }
    ] },
  plugins: [
    new HtmlWebpackPlugin({
      path: '',
      template: Path.resolve(__dirname, '../src/index.html')
    }),
    new Webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('development'),
        FIREBASE_API_KEY: JSON.stringify(process.env.FIREBASE_API_KEY),
        FIREBASE_AUTH_DOMAIN: JSON.stringify(process.env.FIREBASE_AUTH_DOMAIN),
        FIREBASE_DATABASE_URL: JSON.stringify(process.env.FIREBASE_DATABASE_URL),
        FIREBASE_STORAGE_BUCKET: JSON.stringify(process.env.FIREBASE_STORAGE_BUCKET)
      }
    }),
    new Webpack.HotModuleReplacementPlugin()
  ]
});

store.jsx

import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory, hashHistory } from 'react-router';
import { createStore, compose } from 'redux';
import { reactReduxFirebase } from 'react-redux-firebase';
import firebase from 'firebase';
import rootReducer from './core/reducers/index';

const firebaseConfig = {
  //firebase config things
};

firebase.initializeApp(firebaseConfig);

const createStoreWithFirebase = compose(reactReduxFirebase(firebase), window.devToolsExtension
? window.devToolsExtension()
: f => f)(createStore);

const store = createStoreWithFirebase(rootReducer, {});

export const history = syncHistoryWithStore(browserHistory, store);

export default store;

index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute } from 'react-router';
import ReactGA from 'react-ga';
import firebase from 'firebase';
import { ADMIN_LEVEL } from './core/constants/constants';
import store, { history } from './store';
import './bundle.scss';
import App from './core/app';
import Home from './themes/JN/pages/home/home';
import Dashboard from './themes/JN/pages/dashboard/dashboard';
import AccountSettings from './themes/JN/pages/account/settings';
import Listing from './themes/JN/pages/listing/listing';
import course from './themes/JN/pages/course2/course';
import NotFound from './themes/JN/pages/notFound/notFound';
import SignIn from './themes/JN/pages/singin/signin';



// Router initialization
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}
    >
      <Route path="/" component={App}>
        <IndexRoute component={Home} />
        <Route path="dashboard" component={Dashboard} onEnter={requireAuth} />
        <Route path="account" component={AccountSettings} onEnter={requireAuth} />
        <Route path="login" component={Signup} />
        <Route path="courses" component={Listing} />
        <Route path="courses/:slug" component={course} />
        <Route path="courses/:slug/:lessonslug" component={course} onEnter={requireAuth} />

        <Route path="joinus" component={SignIn} />
        <Route path="*" component={NotFound} />
      </Route>
    </Router>
  </Provider>, document.getElementById('react-root')
);

index.html

<!DOCTYPE html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>MOOC project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="/static/css/reset.min.css">
        <link rel="stylesheet" href="/static/css/animate.min.css">
        <link rel="stylesheet" href="/static/css/fira.sans.css">
        <link rel="stylesheet" href="/static/css/simplemde.min.css">
        <link rel="stylesheet" href="/static/css/react-datepicker.min.css">
        <link rel="apple-touch-icon" sizes="57x57" href="/static/icons/apple-icon-57x57.png">
        <link rel="apple-touch-icon" sizes="60x60" href="/static/icons/apple-icon-60x60.png">
        <link rel="apple-touch-icon" sizes="72x72" href="/static/icons/apple-icon-72x72.png">
        <link rel="apple-touch-icon" sizes="76x76" href="/static/icons/apple-icon-76x76.png">
        <link rel="apple-touch-icon" sizes="114x114" href="/static/icons/apple-icon-114x114.png">
        <link rel="apple-touch-icon" sizes="120x120" href="/static/icons/apple-icon-120x120.png">
        <link rel="apple-touch-icon" sizes="144x144" href="/static/icons/apple-icon-144x144.png">
        <link rel="apple-touch-icon" sizes="152x152" href="/static/icons/apple-icon-152x152.png">
        <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/apple-icon-180x180.png">
        <link rel="icon" type="image/png" sizes="192x192"  href="/static/icons/android-icon-192x192.png">
        <link rel="icon" type="image/png" sizes="32x32" href="/static/icons/favicon-32x32.png">
        <link rel="icon" type="image/png" sizes="96x96" href="/static/icons/favicon-96x96.png">
        <link rel="icon" type="image/png" sizes="16x16" href="/static/icons/favicon-16x16.png">
        <meta name="msapplication-TileColor" content="#FFFFFF">
        <meta name="msapplication-TileImage" content="/static/icons/ms-icon-144x144.png">
        <meta name="theme-color" content="#FFFFFF">
    </head>
    <body>
        <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="react-root"></div>
    </body>
</html>