This happens because React uses client-side routing, while Azure Static Web Apps serves static files. When you refresh /login, Azure tries to find a physical /login file, which doesn’t exist, so it returns 404.
This is common with apps using React Router.
Step 1: Add a staticwebapp.config.json file to your project
You need to tell Azure to redirect all routes to index.html so React can handle routing.
Create this file in your build output folder or project root:
staticwebapp.config.json
Step 2: Add this configuration
{
"navigationFallback": {
"rewrite": "/index.html",
"exclude": ["/images/*", "/css/*", "/js/*", "/assets/*"]
}
}
or
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
Then rebuild and deploy again.
swa deploy ./dist --deployment-token YourTokenHere --env production
After Deployment
Now these will work on refresh:
/login
/dashboard
/profile
/settings
No comments:
Post a Comment