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 />,

notFoundComponent: () => <NotFound />,

notFoundComponent: () => <NotFound />, in

__root.tsx

__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,
    };
  },

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>
    </>
  );
}

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>
    </>
  );
}

notFound() doen't render css styles!!!

Similar Threads

Similar Threads

Similar Threads