T
TanStack•4mo ago
stormy-gold

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 />, in __root.tsx. However for any Not found routes like '/cccc', '/pppp' it does show the all the styles only having issue when throwing explicitlly in beforeLoad. 
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,
    };
  },
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>
    </>
  );
}
No description
No description
2 Replies
like-gold
like-gold•4mo ago
can you please check if there is already an existing issue on GitHub for this? if not please create one including a complete minimal example repo. please make sure to use the alpha branch of start
stormy-gold
stormy-goldOP•4mo ago
idk if it's good way to fix it but below code somehow working. I see some issue where beforeLoad is not properlly working with notFound() 
 notFoundComponent: ({ data }) => {
    if (typeof data === "object" && data !== null && "routerCode" in data) {
      return (
        <RootDocument>
          <NotFound />
        </RootDocument>
      );
    }

    return <NotFound />;
  },
 notFoundComponent: ({ data }) => {
    if (typeof data === "object" && data !== null && "routerCode" in data) {
      return (
        <RootDocument>
          <NotFound />
        </RootDocument>
      );
    }

    return <NotFound />;
  },

Did you find this page helpful?