反应路由问题（无创建反应应用）

Question

我已经创建了不使用CRA命令的React应用程序，还安装了React Router Router DOM V6。

当我在URL中有1个路径时，我不会遇到任何错误（例如http：// localhost：3000 /first path）。但是，当我在URL中有2个路径（例如http：// localhost：3000 /first path/secondpath）时，找不到404 first path/main.js。它正在搜索一个称为firstPath的文件夹中的main.js。

在以下代码中，索引，添加和测试URL正在工作。但是编辑URL不起作用。

console log图像 sources tab映像图像

rootRouter.js代码：[browserrouter tag在父母文件中给出了webpack]

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "../views/Home";
import Add from "../views/Add";
import Edit from "../views/Edit";

const rootRouter = () => {
    return (
        <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="add" element={<Add />} />
            <Route path="edit/:id" element={<Edit />} />
            <Route path="test" element={<div>test</div>} />
        </Routes>
    );
};

export default rootRouter;

webpack。 config.js代码：

const path = require("path");
const port = process.env.PORT || 3000;

module.exports = {
    mode: "development",
    entry: "./index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
    },
    target: "web",
    devServer: {
        host: "localhost",
        port: port,
        static: ["./public"],
        open: true,
        hot: true,
        liveReload: true,
        historyApiFallback: true,
    },
    resolve: {
        extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"],
            },
            {
                test: /\.png?$/,
                use: ["file-loader"],
            },
        ],
    },
};