Pages broken when deployed

Hello, I have created a React application using vite. My page navigation worked during development but after deployment it breaks. Just curious if there are any obvious “gotchas” I am missing.

Current: When the “portfolio” button is clicked, the page displays “404 not found”.

Expected: When deployed on my local machine the page navigation works as expected. And the portfolio page is displayed.

Locally hosted: Building locally with “npm run dev” and then clicking the link given. Gives the working application.

Seeing the deployed version: build with “vercel” command. You’ll be given a link in the CLI. Gives the deployed application that breaks when “portfolio” is clicked.

Repo: https://github.com/Orewagenki/resume-website

Deployment site on vercel: https://resume-website-six-flax.vercel.app/

There's another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

https://community.vercel.com/t/debugging-404-errors/437

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Hi , welcome to the Vercel Community!

Glad to see you solved the issue. To help other community members, could you post the link to the community solution that helped you here?

Of course! I will do that now, thank you!

FIX:

create a vercel.json file in the main directory and paste the code:

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