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

root
  • 56
"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>
  );
}
回复
阅读 914
1 个回答
✓ 已被采纳

devServer.historyApiFallback = true

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏