I'm using react-router-dom. After deployment, the web app does not render for pages that depend on react router dom after refresh and gives me
cannot get /home
, such as the about page which is on
<Route path='/about' element={<AboutSGSpots />} />
Initially, the same issue happens in my local development and was solved in local development by directing the routes to serve the index.html file
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
app.use(express.static('dist'));
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});
but the same issue still happens in the deployed app in aws ec2. Has anyone seen this problem and how should i solve it? For more context my frontend is react using vite and my backend is express.js. I build my frontend folder, copy the built folder to my backend and serve my backend to aws ec2. Thank you!
