Viagem ao Espaço

Not really because I have encountered the same probleming although i am deploying on netlify.

Here is how you can address this problem:

When you're using React Router in a Single Page Application (SPA), routing is handled entirely on the client side. This means React Router controls which components to display based on the URL, without reloading the page or requesting new HTML files from the server.

However, when you reload a page or try to directly visit a route like /about, the browser sends a request to the server asking for that path.

The problem is that the server doesn’t know about your client-side routes. It looks for a file at /about (or any other route), and since no such file exists on the server, it returns a 404 error. How to Solve It: To fix this, you need to configure the server to always return the main index.html file for all routes. This way, React Router can handle the routing logic on the client side.

If you're using Vercel as your hosting platform, here's how you can configure it:

Create a vercel.json file at the root of your project (next to package.json).

Add the following configuration inside the vercel.json file:

{ "rewrites": [ { "source": "/(.*)", "destination": "/index.html" } ] }

This tells Vercel to rewrite all requests to serve index.html regardless of the URL path.

Deploy your project to Vercel, and the issue will be fixed.

Why This Solution Works: By using the rewrites configuration, all requests to your app (like /about, /contact, etc.) are redirected to index.html. Once the browser loads index.html, React Router takes control of the routing and renders the appropriate content based on the URL.

Great work! However, after navigating from the homepage to destination page, I consistently encounter a 404 error if i reload the page.