SPA fallback document without rewrite

[rverhaaf]

For my React site, I want to be able to properly use routes using pushstate. Is that possible with Netlify?

Using a rewrite, I have already managed to avoid the 404 when a user refreshes the website that occurred because part of the url is ‘virtual’ (as in: part of a React route). But now the user is always redirected to the default page of my website upon refreshing or after following a deep link instead of being presented with the route he or she was at.

Is it possible to let Netlify respond with the index when the user visits a non-existing url, but without redirecting to the index url so that my React site can serve the route that was requested?

[luke]

Hi, @rverhaaf, I think the following support guide has the solution for this:

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

Last reviewed by Netlify Support - August, 2023 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.

​Please let us know if guide above doesn’t resolve the issue or if there are other questions about this.

[rverhaaf]

Unfortunately, that is exactly what I have done - adding a _redirects file with the following contents.

/* /index.html 200

It fixed receiving a 404 response upon refresh, but instead redirects me to my index page.

Currently, if the user is on /signup (a route in my SPA) and refreshes, he is again presented with the homepage (/). Instead, I want the behaviour that although /signup does not resolve to a file, the contents of index.html is returned but the browser is not redirected there.

[luke]

Hi, @rverhaaf. That is the default behavior at Netlify. If something changes in the address bar, the site javascript must make the change.

If you are seeing something different, what is the real URL affected?

You can private message (PM) that to one of our support staff and I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.

[rverhaaf]

Hi Luke,

You’re right of course, and I have found my mistake. It turns out that I used a self-made component that redirected to index for pages that needed authentication. Only, due to the fetching of the logged in user from a useEffect hook the first render was always based on initial state (not logged in).
I have changed it so it returns an empty page instead of a redirect and this solves the issue.

Thanks for your help!

[luke]

Hi, @rverhaaf. Thanks for the follow-up to share your solution.