I deployed my app to gh-pages
and the root works, but whenever I reroute or try and add to the root, I get a page not found error. Locally it works.
I've seen people suggest changing from <BrowserRouter>
to <HashRouter>
but that didn't help. I've also seen, and even used, a solution for create-react-app
or webpack
where you add some code to the index.html
file in the public
directory as well as a 404.html
but the issue is vite
has a different file structure.
Where would I put them in a vite
application where there's nothing in the public
directory. It does have a dist
folder with an index.html
but I'm not sure if that's the one.
Not sure what code I would need to show, but here's my main.jsx
and App.jsx
files:
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>
);
Again, locally this works, and when deploying to gh-pages
the root or home page work, but no extended routes. Like I said, I had a similar issue with webpack
but the solution I got there didn't work since vite
has different file structure so I was unsure how to add the correct files.
EDIT: I've also seen a github issue where a user had a similar issue and the solution was to define routes in the vite.config.js
but again the difference there is that user had multiple index.html
files for each component/route. I just have the standard <BrowserRouter>
situation wrapping my routes.
adding a 404.html
in the public folder:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Page Not Found</title>
<script>
sessionStorage.redirect = location.href;
</script>
<meta http-equiv="refresh" content="0;URL='/'" />
</head>
<body></body>
</html>
This JS in the root's index.html
just before the closing </body>
tag:
<script>
(() => {
const redirect = sessionStorage.redirect;
delete sessionStorage.redirect;
if (redirect && redirect !== location.href) {
history.replaceState(null, null, redirect);
}
})();
</script>
And lastly reconfiguring the vite.config.js
file:
export default defineConfig({
plugins: [react()],
build: {
rollupOptions: {
input: {
main: resolve(__dirname, "index.html"),
404: resolve(__dirname, "public/404.html"),
},
},
},
});