React-router-v6 无法在刷新时获取页面

Question

我有这样的路线

\n

import React from "react"\nimport { Routes, Route } from "react-router-dom"\n...\n\nexport default function App() {\n  return (\n    <div className="App">\n          <div className="content">\n            <Routes>\n              <Route path="/projects" element={<Projects/>} />\n              <Route path="/projects/:id" element={<ProjectsDetails/>}/>\n              <Route path=\'*\' element={<NotFound />} />\n            </Routes>\n          </div>\n    </div>\n  );\n}\n

\n

我可以毫无问题地导航这条路线。如果我刷新“ /projects ”页面，也不是问题。

\n

我可以毫无问题地导航“ /projects/1 ”。但是如果我刷新那里的页面，我会收到错误“GET http://localhost:9200/projects/bundle.js net::ERR_ABORTED 404 (Not Found)”

\n

主路由没有问题，但带参数的 url 有问题（页面刷新时）。

\n

我该如何解决这个问题？

\n

编辑

\n

 webpack.config\n\n    ...\n    devServer: \n   {\n            port: 9200,\n            contentBase: path.join(__dirname, "/dist"),\n            hot: true,\n            watchContentBase: true,\n            historyApiFallback: true,\n    },\n    ...\n

\n

在 CodeSandBox 上直播

\n

我在这里的演示中没有遇到任何问题。看来问题出在我的配置上。

\n

解决方案

\n

与 \xd0\x92\xd0\xb0\xd0\xbb\xd0\xb5\xd1\x80\xd0\xb0 \xd0\x91\xd0\xb8\xd1\x82\xd0\xba\xd0\xbe\xd0\xb2\ xd1\x81\xd0\xba\xd0\xb8\xd0\xb9\ 的建议，我添加

\n

<base href="/">\n

\n

在index.html 文件中。

\n

Answer 1

看来您的应用程序正在尝试从错误的路径获取捆绑包。尝试添加<base href="/">或什至更好地<base href="%PUBLIC_URL%/">将您的index.html添加到head标签中