notFound() doen't render css styles!!!
i'm throwing a notFound() when the slug doen't match the parameter like below. But somehow the styles is not attached/ redred in the browser. i have set the
notFoundComponent: () => <NotFound />,notFoundComponent: () => <NotFound />,__root.tsx__root.tsxbeforeLoad: ({ params, search }) => {
const slug = params.slug;
if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith("docs")) {
throw notFound();
}
return {
page: search.page || 1,
perPage: search.perPage || 24,
};
},beforeLoad: ({ params, search }) => {
const slug = params.slug;
if (!slug.includes(env.VITE_CATEGORY) || !slug.endsWith("docs")) {
throw notFound();
}
return {
page: search.page || 1,
perPage: search.perPage || 24,
};
},export function NotFound() {
return (
<>
<div className="min-h-[calc(100vh-100px)] fixed-width flex flex-col items-center justify-center">
<div className="flex flex-col gap-8 items-center justify-center text-center">
<h1 className="text-4xl lg:text-6xl font-bold text-[var(--clr-accent)]">
404 - Page Not Found
</h1>
<p className="mt-2 text-xl lg:text-2xl text-accent">
Sorry, we couldn't find the page you're looking for.
</p>
<div className="">
<Link
to="/"
className="tracking-widest! font-kd2 flex items-center justify-center gap-2 text-xl px-4! py-1! border border-transparent font-bold rounded-md text-black bg-accent hover:text-black/50"
>
<RiHome5Fill />
<span className="font-extrabold">HOME</span>
</Link>
</div>
</div>
</div>
</>
);
}export function NotFound() {
return (
<>
<div className="min-h-[calc(100vh-100px)] fixed-width flex flex-col items-center justify-center">
<div className="flex flex-col gap-8 items-center justify-center text-center">
<h1 className="text-4xl lg:text-6xl font-bold text-[var(--clr-accent)]">
404 - Page Not Found
</h1>
<p className="mt-2 text-xl lg:text-2xl text-accent">
Sorry, we couldn't find the page you're looking for.
</p>
<div className="">
<Link
to="/"
className="tracking-widest! font-kd2 flex items-center justify-center gap-2 text-xl px-4! py-1! border border-transparent font-bold rounded-md text-black bg-accent hover:text-black/50"
>
<RiHome5Fill />
<span className="font-extrabold">HOME</span>
</Link>
</div>
</div>
</div>
</>
);
}
