All routes except the root route are invalid

[yfools]

what i used react-router-dom version is v6.22.0. and when i visit 'http://localhost:8888/first', it shows 404

import React from "react";
import ReactDOM from "react-dom/client";
import A from "./A.jsx";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import B from "./B.jsx";

const root = ReactDOM.createRoot(document.getElementById("root"));

const routes = [
  {
    path: "/",
    Component: A,
    children: [],
  },
  {
    path: "/first",
    // Component: A_C,
    Component: B,
    // children: [{ path: '/A_C', element: <A_C></A_C> }]
  },
];

const router = createBrowserRouter(routes);

root.render(
  <React.StrictMode>
    <RouterProvider router={router}></RouterProvider>
  </React.StrictMode>
);

{
  "name": "webpack-react-js-template",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@babel/core": "^7.23.7",
    "@babel/preset-env": "^7.23.9",
    "@babel/preset-react": "^7.23.3",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.0",
    "webpack-dev-server": "^4.15.1"
  }
}

[brophdawg11]

If you are getting a 404 from the HTTP server - you will need to configure your server to return the index.html file for all paths, not just for the / path. This is often referred to as a "SPA Fallback". I'm not familiar with the webpack-dev-server CLI but --history-api-fallback might do the trick.