ответить. js с веб-пакетом Ресурс заблокирован из-за несоответствия типа MIME при доступе к параметрам URL с помощью маршрутизатора реакции

Question

Когда я пытаюсь получить доступ к URL-адресу, например, localhost: 8080 / edit / 12, я получаю сообщение об ошибке на консоли и не могу получить к нему доступ по идентификатору, это проблема в версиях, используемых в пакете. json или в файле конфигурации веб-пакета?

Компонент 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>
);

Файл конфигурации веб-пакета:

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>
    );
  }
}