webpack-dev-server 多页面，本地调试时路由不知道该如何处理？

Question

"webpack": "^5.52.1",
"webpack-cli": "^4.8.0",
"webpack-dev-server": "^4.2.1"

我自己搭建的一个多页面的webpack项目，build后最终生成的目录如下：
├─Page1
│ index.html
│ Page1.css
│ Page1.css.map
│ Page1.js
│ Page1.js.map
│
├─Page2
│ index.html
│ Page2.css
│ Page2.css.map
│ Page2.js
│ Page2.js.map

Page1和Page2有自己独立的路由使用的是react-router-dom， 本地开发调试时，我的想法是webpack-dev-server访问localhost/Page1 就进入Page1的index.html;访问localhost/Page2就进入Page2的index.html，实验到此还是成立的。 当我localhost/Page1/about时，还是可以切换的。 然鹅我刷新页面时，就：Cannot GET /Page1/about

我的问题是：我本地调试时应该如何实现我上面描述的预期（即：多个单页面并存，且每个单页面都有自己独立的路由）。

我把内部路由的代码如下：

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useRouteMatch,
  useHistory,
  useLocation,
  useParams,
} from "react-router-dom";

interface Props {}
function Home() {
  return <h2>123123</h2>;
}

function About() {
  return <h2>About1</h2>;
}

function Users() {
  return <h2>Users</h2>;
}
export default function Main({}: Props): React.ReactElement {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/IndexPage">Home</Link>
            </li>
            <li>
              <Link to="/IndexPage/about">About</Link>
            </li>
            <li>
              <Link to="/IndexPage/users">Users</Link>
            </li>
          </ul>
        </nav>
        <Switch>
          <Route path="/IndexPage/about">
            <About />
          </Route>
          <Route path="/IndexPage/users">
            <Users />
          </Route>
          <Route path="/IndexPage">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

Answer 1

devServer.historyApiFallback = true