[Support Guide] Direct links to my single page app (SPA) don't work

If you’re building a Single Page Application (SPA), or an app that manages its own routes (url paths), you’ll want to add a _redirects file to your publish directory with the following line to take advantage of browser history pushstate:

/*    /index.html   200

You can read more information in our docs, which can be found here.

2 Likes
React App not accessible with direct links
Vue/nuxtJS slug: 404 on refresh
Page Not Found when refreshing a page that is not the landing-page
Netlify Forms and "Back to our site" with React returns me to a non-existent page
Only the homepage loads, but other routes are not working showing broken url
(SPA) Routes rendered with map() function give blank page on refresh
Redirect don't work when you visit your site for the first time
404 caused by missing SPA redirect rule
Netlify static error after reload page
Custom domain's subpages not redirecting to GitLab subpages
ReactJS SPA Reload Page Fails
ReactJS SPA Reload Page Fails
URL is not working
Page not found for links
404 page not found after deploy a new page
I am getting error - Page not found
Page Not Found - broken links - can't refresh some pages
Not Found Page After deploying successfully
Is it possible to create rewrite redirects via netlify.toml?
Getting 404 on my links to other pages of my app
Root relative pages (custom domain) throw page not found
Netifly site won't load on subfolder in url
Deploying single page applications
On redirection to app getting Page not found
React-bootstrap Nav.Link
React-router urls don't work when refreshing or writing manually
Direct links to pages other than landing page break layout
Not showing the page in subfolder when opening the link directly
React Netlify Deploy reload error
I can only access my site through the root url but not through a specific route
Netlify Forms with Vuepress Issue
SPA fallback document without rewrite
404 Error after Refresh
Custom 404 / 500 pages on the free tier?
Page Not found error, has index.html & not in subfolder
Gridsome Client Side Routing - Route changes break after initial page load
Errors after refreshing
Page not found for route "/login"
Can't access aux pages of React app after build
Browser Reload Problem
1 or 2 pages do not render without refreshing the page
Page not found for route "/login"
Unable to verify DNS configuration for my application
Site Fully Deployed - Cannot Access Pages Beyond Homepage
Page Not Found After deployment
404 errors after migration from Heroku to Netlify
Page not found for some links
Gatsby website - subpages don't load when navigated via direct url
Recaptcha not loading correctly
Gridsome: Router is working only when I refresh the page #weird

I have seen people asking on twitter about this. A common question seems to be, “but how do you handle 404s this way?”

For single page applications which require all URLs to be routed to this index.html page so that they can handle the routing in JavaScript, that JavaScript logic is going to need to handle the 404s too. This is because the information about what routes resolve to what views is held in the JS. It needs to handle the behaviour for any missing views itself too.

2 Likes

That’s a great question! the issue is the same with an SPA regardless of where you host it since all requests are passed to the router. If you know all your routes then you can use netlify _redirects to send those specific routes that are used to your index.html, and all others can be handled with a 404 failover rule. Since the _redirects file needs to be there at the end of the build, you can generate a _redirects file based on your routes programmatically during the build process. That said, I don’t know anyone that does this. Google’s crawlers in theory are able to crawl SPA’s, but I don’t know how well that works, and anecdotally speaking , prerendering the page will still give you better results.

Or you can use a static site generator like Gatsby/React-Static or Gridsome/Nuxt (if you already use React or Vue)

1 Like