我将我的应用部署到了gh-pages
,根路径可以访问,但是每当我重定向或者尝试添加到根路径时,就会得到一个页面未找到的错误。在本地测试是可以正常工作的。
有人建议将<BrowserRouter>
改为<HashRouter>
,但这并没有帮助。我也看到过并使用了一个create-react-app
或webpack
的解决方案,其中你需要在public
目录下的index.html
文件中添加一些代码以及一个404.html
,但问题是vite
具有不同的文件结构。
在一个vite
应用程序中,如果public
目录为空,那么我该把它们放在哪里呢?它确实有一个dist
文件夹,其中包含一个index.html
,但我不确定是否应该将其用作解决方案。
我不确定需要展示哪些代码,但是这是我的main.jsx
和App.jsx
文件:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
function App() {
return (
<Router>
<Header />
<div className="app">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/example" element={<Example />} />
</Routes>
</div>
</Router>
);
}
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
再次强调,本地环境下这个可以工作,但是在部署到 gh-pages
后,根目录或首页可以工作,但是没有扩展路由。就像我说的,我之前在使用 webpack
时也遇到了类似的问题,但是那里的解决方案对于 vite
并不适用,因为它们的文件结构不同,所以我不确定如何添加正确的文件。
编辑:我还看到了一个 Github issue,其中一个用户遇到了类似的问题,解决方案是在 vite.config.js
中定义路由,但是不同的是该用户为每个组件/路由都有多个 index.html
文件。而我只有标准的 <BrowserRouter>
包装我的路由。