javascript - 如果我尝试在新标签页中复制并粘贴网址，React Router会显示404

我不确定React Router是否无法正常工作或缺少什么。

我有这样的东西

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider  } from 'mobx-react';
import { configure } from 'mobx';
import createBrowserHistory from 'history/createBrowserHistory';
import {syncHistoryWithStore } from 'mobx-react-router';
import { Router } from 'react-router'

import AppContainer from './components/App';

const browserHistory = createBrowserHistory();

import stores from '../src/stores/Stores';

const history = syncHistoryWithStore(browserHistory, stores.routingStore);

configure({ enforceActions: true});

ReactDOM.render(
    <Provider {... stores}>
        <Router history={history}>
           <AppContainer />
        </Router>
    </Provider>,
       document.getElementById('app')
);

然后在我的AppContainer中，我有这个

import { withRouter, Route, Link } from "react-router-dom";
<Route path="/company-details/company/:companyId/employee/:employeeId" component={CompanyComponent} />

和

   <Link to="/company-details/company/76/employee/77"></Link>

现在，当我单击链接时，它会转到正确的页面，并且可以访问参数。

但是说出我是否按了ctrl并单击以创建新标签，同时单击链接或刷新页面。

我懂了

GET http://localhost:8080/company-details/company/76/employee/index_bundle.js 404 (Not Found)

Refused to execute script from 'http://localhost:8080/company-details/company/76/employee/index_bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

我已经安装了这些软件包

"react-router-dom": "^4.2.2"
 "mobx-react-router": "^4.0.4",

编辑

我的webpack.config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: ["babel-polyfill", "./src/index.js"],

  output: {
    path: path.join(__dirname, "/dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
            options: {}
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html"
    })
  ],
  devServer: {
    historyApiFallback: true
  }
};

最佳答案

在index.html内部，您应按以下方式链接脚本文件：

<script type="text/javascript" src="./index_bundle.js"></script>