Creé la aplicación de reacción sin usar el comando CRA y también instalé el enrutador de reacción dom v6.

Cuando tengo 1 ruta en la URL, no aparece ningún error (como http://localhost:3000 /firstPath ). Pero, cuando tengo 2 rutas en la URL (como http://localhost:3000 /firstPath/secondPath ), aparece el error 404 firstPath/main.js no encontrado. Está buscando main.js dentro de una carpeta llamada firstPath.

En el siguiente código, las URL de índice, adición y prueba están funcionando. Pero la URL de edición no funciona.

Imagen de la pestaña Orígenes de la imagen de registro de la consola

código rootRouter.js: [La etiqueta BrowserRouter se proporciona en el archivo principal]

 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;

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