反应：无法获取 [页面名称]

Question

我正在尝试为我的 react-app 创建一个路由器，但我收到一个奇怪的错误。我试图自己修复它，但我真的找不到解决方案。这是我的 App.js：

import React from "react";
import "App.css";
import Header from "./Header";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const App = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/checkout">
            <Header />
          </Route>
          <Route path="/">
            <Header />
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;

当我现在转到 url localhost:8080/checkout 时，它给了我以下错误：无法获取 /checkout。 我运行了 npm install react-router-dom 并在我的 webpack.config.js 中添加了 devServer.historyApiFallback: true 和 output.publicPath: '/'。这是我的 config.js：

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

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  devServer: {
    hitoryApiFallback: true,
    contentBase: path.join(__dirname, "../"),
    watchContentBase: true,
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      },
    ],
  },
};