javascript - 如果我尝试在新选项卡中复制并粘贴 url,React Router 会给出 404

标签 javascript reactjs webpack react-router webpack-dev-server

我不确定 react 路由器是否无法正常工作或者我是否遗漏了某些内容。

我有这样的东西

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>

关于javascript - 如果我尝试在新选项卡中复制并粘贴 url,React Router 会给出 404,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51092016/

相关文章:

javascript - 根据 ng-style 中的数学表达式更改字体颜色

javascript - 通过 mongoose 将条目插入 MongoDB 中的多级嵌套数组

javascript - 在决定渲染之前 react 等待 map 功能以防止div闪烁

css - 如何使用 webpack、typescript、phaser 和 angular 配置全局 css 和 sass 样式表

docker - 在Docker生产服务器上编译Webpack

javascript - 媒体打印 css 在 IE11 打印预览中不起作用

javascript - 正则表达式在 JavaScript 字符串中返回未定义

css - withStyles 中的 min()

reactjs - 在Formik React表单的handleSubmit方法中设置Redux State

javascript - es6在类中导入类