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

Question

我有这样的路线

import React from "react"
import { Routes, Route } from "react-router-dom"
...

export default function App() {
  return (
    <div className="App">
          <div className="content">
            <Routes>
              <Route path="/projects" element={<Projects/>} />
              <Route path="/projects/:id" element={<ProjectsDetails/>}/>
              <Route path='*' element={<NotFound />} />
            </Routes>
          </div>
    </div>
  );
}

我可以毫无问题地导航这条路线。如果我在“/projects”上刷新页面也没有问题。

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

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

我该如何解决这个问题？

编辑

 webpack.config

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

Live on CodeSandBox

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

解决方案

根据 Валера Битковский 的建议，我添加了

<base href="/">

在 index.html 文件中。

Answer 1

您的应用似乎正试图从错误的路径获取捆绑包。尝试将 <base href="/"> 或更好的 <base href="%PUBLIC_URL%/"> 添加到您的 index.html 到 head 标签

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

React-router-v6 cannot get page on refresh

reactjs

react-router

react-router-dom