Vercel is a popular hosting platform for front-end applications, offering various deployment and hosting features. Deploying a React app to Vercel is a straightforward process, but it can become problematic when you need to handle redirects from child paths to the root.
When deploying a React app, you might encounter a situation where your child paths aren't automatically redirected to the root, causing unexpected behavior in your application. After having the page deployed, for example, https://yourwebsite.vercel.app, this path loads successfully, right? But once you navigate to a different route on the page and try to refresh, you'll usually see a 404 error like the one below.
There are cases whereby you would want to show someone a specific page on your react app, and you would want to give them the exact URL to that page, for example, https://yourwebsite.vercel.app/contact-page. If the person loads the page, they will get a 404 error simply because Vercel fails to load the child path from the root.
I assume you already have your app built and deployed on Vercel? If you haven't, please do so. Let's say you already have a React app with multiple routes, and your app is hosted on Vercel. When you visit a child path of your app, such as https://yourapp.vercel.app/child, you might expect it to redirect to the root path (https://yourapp.vercel.app/), but it doesn't happen by default. This can lead to issues like broken links, incorrect rendering, and a poor user experience.
To solve this problem, you can use Vercel's "rewrites" feature. "rewrites" allows you to configure how requests are handled, including URL redirection. In this case, you want to redirect all child paths to the root path.
Create a vercel.json file within the root folder of your project.
Then paste the code below within the json file:
{
"rewrites": [
{ "source": "/(.*)", "destination": "/" }
]
}
"rewrites"specifies the rules for URL rewrites.
{ "source": "/(.*)", "destination": "/" }tells Vercel that for any URL path that matches /(.*) (essentially any path), redirect the request to the root path (/).
Ensure you push these new changes to update your repository.
By adding this simple configuration in the vercel.json file, you can resolve this issue. With this configuration in place, your React app will redirect child paths to the root path, ensuring that all your routes work as intended.
Top comments (9)
Same here...
Although I am building a project without any framework at the moment (pure vanilla for now), I did add the vercel.json file to my project folder with the suggested code but I keep running into the same issue.
When checking the logs in Vercel, I only get this info:
Any help would be appreciated :)
Worked for me. Thanks David!
it still hasen't work in my case
okay I finally managed to solve the issue in my case and the solution:
I just had to update my initial home page name to index.html (previously my homepage was named differently), and it seems like vercel need this index file (as mentioned in this page: vercel.com/docs/edge-network/direc... )
Maybe it's the same for you?
I've done that, is the file outside the folder?
Yeah, it is. Thanks for sharing this information. It really saves a developer from being confused :)
Thx!
This worked.