I have created react app without using CRA command and also installed react router dom v6.

When I have 1 path in url, I don't get any error (like http://localhost:3000 /firstPath ). But, when I have 2 paths in URL (like http://localhost:3000 /firstPath/secondPath ), I get 404 firstPath/main.js not found error. It is searching for main.js inside a folder called firstPath.

In the following code, the index, add and test URLs are working. But the edit URL is not working.

Console Log Image Sources Tab Image

rootRouter.js code: [BrowserRouter tag is given in the parent file]

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 code:

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"],
            },
        ],
    },
};