reactjs - React-Router / Webpack 的问题：无法获取带有 url 参数的页面

Question

我知道这个问题以前被问过太多次了，我已经花了几个小时来研究它们，但在我的情况下没有任何效果。

首先，这是我的设置：

package.json - 依赖项

"dependencies": {
    "contentful": "^8.1.7",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-icons": "^4.1.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "webpack": "^5.16.0",
    "webpack-cli": "^4.4.0",
    "webpack-dev-server": "^3.11.2"
  },
 

webpack.config.js -- 删除不相关的东西

    module.exports = {
       mode: "development",
       entry: {
          index: "./src/index.js",
          print: "./src/print.js",
       },
       devtool: "source-map",
       output: {
          path: path.resolve(__dirname, "dist"),
          filename: "index_bundle.[contenthash].js",
       },
       devServer: {
          historyApiFallback: true,
       },
    };

** 代码 **

const App = () => {
   return (
      <>
         <Router>
            <Switch>
               <Route exact path="/" children={<Home />}></Route>
               <Route path="/rooms" children={<Rooms />}></Route>
               <Route path="/rooms/:id" children={<SingleRoom />}></Route>
            </Switch>
         </Router>
      </>
   );
};

export default App;

所有 URL 都工作正常，除非我导航到，例如： http://localhost:8080/rooms/1 .. 它返回 404 not found。

标签： reactjswebpackreact-routerreact-router-dom