how do I change the not found page ?
Answered
House Wren posted this in #help-forum
House WrenOP
I'm hosting a react vite app on vercel and I'm having a hard time changing the not found page ui, I get this page u see in the image and nothing seem to work so far tried these names for not found page
- src/pages/notFound.tsx
- src/pages/not-found.tsx (same name as nextjs)
both didn't work please help
- src/pages/notFound.tsx
- src/pages/not-found.tsx (same name as nextjs)
both didn't work please help
Answered by joulev
at the root of your project, add a vercel.json file with the following content
to forward all requests to your react app
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}to forward all requests to your react app
17 Replies
@House Wren I'm hosting a react vite app on vercel and I'm having a hard time changing the not found page ui, I get this page u see in the image and nothing seem to work so far tried these names for not found page
- src/pages/notFound.tsx
- src/pages/not-found.tsx (same name as nextjs)
both didn't work please help
react with vite? what router are you using? react router or tanstack router?
just follow the documentation of the router you are using to add a screen for the not found page
no, nextjs file name conventions are applicable only in nextjs, not in other frameworks
just follow the documentation of the router you are using to add a screen for the not found page
no, nextjs file name conventions are applicable only in nextjs, not in other frameworks
@joulev react with vite? what router are you using? react router or tanstack router?
just follow the documentation of the router you are using to add a screen for the not found page
no, nextjs file name conventions are applicable only in nextjs, not in other frameworks
House WrenOP
it's react router dom 6, it's weird because it works in localhost locally but it doesnt work in production, also I tried another host and it worked
import { useLocation, useNavigate } from "react-router-dom";
import { useEffect } from "react";
const NotFound = () => {
const location = useLocation();
const navigate = useNavigate();
useEffect(() => {
console.error(
"404 Error: User attempted to access non-existent route",
location.pathname
);
// Redirect to /dashboard
navigate("/dashboard", { replace: true });
}, [location.pathname, navigate]);
return <div></div>;
};
export default NotFound;my not found page basically redirect to dashboard it doesnt have ui but it seems like vercel server is using a default notFound page but i don't know how to change it i didn't have this issue with nextjs
do you have a vercel.json file? if yes, what does it look like?
House WrenOP
where do i find in root folder?
i don't have it
there's a folder .vercel with a file project.json
ok in this case it's likely that any pages other than root will cause the 404 error, not just not found pages
at the root of your project, add a vercel.json file with the following content
to forward all requests to your react app
{
"rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}to forward all requests to your react app
Answer
then it should work
right now only requests to
/ is forwarded to your react app, other paths do not even reach the react routerHouse WrenOP
can I change the destination to a route or I have to leave it /index.html?
yeah it worked
so basically when vite builds your app, it will make a folder with static files in there with the
index.html file being the entrypointHouse WrenOP
thank you @House Wren
so yes it has to be
index.htmlnice, glad it worked