Your page works through the menu, then shows a 404 when refreshed or shared. Check how your hosting handles direct links before rebuilding a working page.
ChatGPT
Claude
Google
GrokYou click Services in your website's menu and the page opens. Refresh it, or send the link to someone else, and they get a 404 error.
The page may exist. Your host may simply be handling a direct visit differently from a click inside the site.
Why do I get a 404 when I refresh my website?
Clicking a menu link and opening a full address aren't always the same request.
You can get a 404 on refresh because your browser knows how to display a page that your hosting server doesn't know how to open directly. This often happens with single-page apps that need a hosting rule for their page addresses.
A single-page app loads a main file, then changes the view as you click around. On refresh, the host receives the full address, such as /services, and needs to know what to return.
Netlify explains this routing behaviour. Routing means deciding which page should appear for a requested address.
Don't add the same fix to every website. A static React app and a server-backed Next.js site can need different solutions.
How do you check whether the page is missing?
Compare three ways of opening the same address.
- Open the homepage and click the menu link.
- Refresh once you're on the page.
- Paste the full address into a private browser window.
Write down what happens in each case. Then test another page beyond the homepage.
These results help narrow the problem.
| Result | What to check |
|---|---|
| Menu works, refresh fails | Hosting rules for direct page visits |
| One page fails every way | Missing page, wrong link or unpublished content |
| Even the homepage fails | The deployment and hosting setup |
| Host's address works, your domain fails | Where the domain points |
| Page opens, images or scripts fail | Missing files or incorrect file paths |
A 404 on an image is different from a 404 on the page itself. Ask your developer to identify which request fails using Chrome's Network panel.
Also check that your custom domain serves the newest successful deployment; fixing a project the domain doesn't use changes nothing for visitors.
How do you fix a static app?
The host may need a rule that serves the app when someone opens one of its page addresses.
This is called a rewrite. It returns the app without sending the visitor away from the address they requested.
On Vercel
For a Vite project built as a static single-page app, Vercel documents a rewrite to index.html.
Ask your developer or AI builder to check the existing vercel.json configuration and add the appropriate rule. They should preserve working redirects, file handling and any API routes.
You can give them this brief:
The Services page works through the menu but returns 404 when opened directly. Confirm whether this is a static single-page app. If so, add the correct Vercel rewrite without breaking existing routes or files, then test refresh and direct visits.
A rewrite to the main app file is for that kind of app. It isn't a universal Next.js fix.
On Netlify
A static app may need this rule in its deployed _redirects file:
/* /index.html 200
Netlify's rewrite guide explains the rule. It should follow more specific rules, and the file needs to reach the deployed site folder.
Saving the rule isn't enough: deploy it, confirm it reached the host and repeat the direct-link test on your public domain.
If your app has special API paths or serves from a subfolder, a copied catch-all rule can create a new problem.
What if your website uses Next.js?
First, ask how it is hosted.
A normal Next.js deployment handles pages through its own routing system. Check that the route exists, the build succeeded and the host recognised the framework.
A static export is different: the build creates files for the host to serve. The affected page must be included in that output, and the host must map the URL to the right file.
For example, the exported file may be about.html or about/index.html, depending on the setup. Next.js documents static exports and their limitations.
Ask the developer to show you the output for the failing page before changing the hosting rules. A rule can't restore content that was never built or a draft that should remain private.
Sometimes the page truly is gone. Fix an incorrect link or redirect a moved page to its relevant replacement. If there is no replacement, a genuine 404 can be the correct response.
If visitors hit an error after following your link, we can find and fix the routing problem. We repair custom-coded sites and price the work by how serious the problem is; if yours runs on Framer or Webflow, we'd talk about a custom rebuild instead. Book a free intro call with no commitment, or reach us at hi@aruno.studio, on WhatsApp or on Telegram at @mihaipostelnicu.
Our website audit covers what visitors see (design, UX, speed, copy and SEO), not routing or hosting setup. If pages work but aren't appearing in search, use the separate Google visibility tutorial. If the domain shows a browser warning, run these HTTPS checks first.
Which quick fixes should you avoid?
Keep visitors on the page they intended to reach.
These changes can make the error less visible while leaving the website broken.
| Shortcut | Why it causes trouble | Better action |
|---|---|---|
| Send every missing URL to the homepage | The requested page is lost | Return the intended page or relevant replacement |
| Add an app rewrite to every framework | Existing routing can be bypassed | Match the fix to the hosting setup |
| Replace the entire host configuration | Working rules can disappear | Make the smallest necessary change |
| Return the app for every file request | Images or scripts may receive HTML | Check file and API handling |
| Test only through the menu | Shared links can still fail | Open full addresses independently |
An error page returned as a successful response can also become a soft 404 in Google. Keep real missing-page handling in place.
How do you confirm the repair worked?
Test fresh visits on the live domain.
Open the failing page directly, refresh it and repeat the test on another nested page. Check images, scripts and forms too.
Then open an invented address that doesn't exist. It should still show the site's intended missing-page experience, rather than pretending a nonexistent service exists.
Save those results; they're better evidence than a screenshot reached through the menu.
Frequently asked questions
Does a refresh 404 mean I need to rebuild my site? Usually, you should check routing and deployment first. A hosting rule may be enough for a static app.
Why does the homepage work? The host can find the main app file at the root address. It may lack instructions for other addresses.
How much does fixing this cost? A missing rule is a different job from repairing an incomplete deployment. Ask for a diagnosis and quote covering direct-link tests.
How long does it take? A simple configuration change can be quick after the cause is confirmed. Missing pages or unsupported hosting features need more work.
A link should work for someone arriving for the first time. Test it that way.
Share this article:
