I have a react app, using react-router-dom looking something like this:
trying to create a MERN project for myself using React , Express, MongoDB and Node..
function App() {
return (
<div className="App">
<BrowserRouter>
<Routes>
<Route path="/" element={<SignIn/>} />
<Route path="/alltask" element={<AllTask/>} />
<Route path="/mytask" element={<MyTask/>} />
<Route path="/newtask" element={<NewTask/>} />
<Route path="/history" element={<History />} />
</Routes>
</BrowserRouter>
</div>
);
}
when i run the app i can see the paths in the url properly looking like: localhost:3000/alltask no problem.
i want to combine my app with express, so i ran npm run build. and after i use express.static on the build folder, my project works on express.
problem is when i try to hard type in the url “localhost:3000/alltask” , i get “Cannot GET /alltask”.
i fix it by using
app.get("*", (req, res) => {
res.sendFile(__dirname + "/task/build/index.html");
})
but now when i hard type the URL i get a blank page. what is the problem? what am i doing wrong?
cant find anything on the web about this.
I tried using app.use instead of app.get to server the index.html , i dunno what else can be done..