带有webpack的react.js，当使用react路由器访问URL参数时，由于MIME类型不匹配而导致资源被阻止

Question

[当我尝试访问诸如localhost：8080 / edit / 12之类的URL时，在控制台上出现错误，我无法从中访问ID，这是package.json上使用的版本中的问题吗？或在webpack配置文件？

Component EditExpensePage：

import React from "react";
const EditExpensePage = (props) => {
  return (
    <div>This is from EditExpensePage component at {props.match.params.id}</div>
  );
};
export default EditExpensePage;

组件路由器AppRouter：

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import EditExpensePage from "../components/EditExpensePage";
const AppRouter = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/edit/:id" component={EditExpensePage} />
      </Switch>
    </div>
  </BrowserRouter>
);

Webpack配置文件：

const path = require("path");
module.exports = {
  entry: "./src/app.js",
  output: {
    path: path.join(__dirname, "public"),
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        loader: "babel-loader",
        test: /\.js$/,
        exclude: /node_modules/,
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  devtool: "source-map",
  devServer: {
    contentBase: path.join(__dirname, "public"),
  },
};

Answer 1

[我通过将组件EditExpensePage转换为类组件找到了解决方案，并且有效。

import React from "react";

export default class EditExpensePage extends React.Component {
  render() {
    return (
      <div>
        This is from EditExpensePage component at {this.props.match.params.id}
      </div>
    );
  }
}