Custom 404 page with multiple layouts
Hi all!, i'm just trying to create a custom 404.tsx in pages router with custom layouts, one with SiteLayout and another with DashboardLayout, but i'm getting an error in the server having different render from client when i use asPath from useRouter to check if i'm in the dashboard. any help ??
import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { Button } from "~/components/ui/Button";
import SiteLayout from "~/layouts/Site";
const NotFound: NextPage = ({}) => {
const { asPath } = useRouter();
if (asPath.includes("dashboard")) {
return <SiteLayout>Dashboard 404</SiteLayout>;
}
return (
<SiteLayout>
<main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
<div className="text-center">
<p className="text-base font-semibold text-[#0080ff]">404</p>
<h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Page not found
</h1>
<p className="mt-6 text-base leading-7 text-gray-600">
Sorry, we couldn’t find the page you’re looking for.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button>
<Link href="/">Go back home</Link>
</Button>
{/* <a href="/" className="text-sm font-semibold text-gray-900">
Contact support <span aria-hidden="true">→</span>
</a> */}
</div>
</div>
</main>
</SiteLayout>
);
};
export default NotFound;import type { NextPage } from "next";
import Link from "next/link";
import { useRouter } from "next/router";
import { Button } from "~/components/ui/Button";
import SiteLayout from "~/layouts/Site";
const NotFound: NextPage = ({}) => {
const { asPath } = useRouter();
if (asPath.includes("dashboard")) {
return <SiteLayout>Dashboard 404</SiteLayout>;
}
return (
<SiteLayout>
<main className="grid min-h-full place-items-center bg-white px-6 py-24 sm:py-32 lg:px-8">
<div className="text-center">
<p className="text-base font-semibold text-[#0080ff]">404</p>
<h1 className="mt-4 text-3xl font-bold tracking-tight text-gray-900 sm:text-5xl">
Page not found
</h1>
<p className="mt-6 text-base leading-7 text-gray-600">
Sorry, we couldn’t find the page you’re looking for.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<Button>
<Link href="/">Go back home</Link>
</Button>
{/* <a href="/" className="text-sm font-semibold text-gray-900">
Contact support <span aria-hidden="true">→</span>
</a> */}
</div>
</div>
</main>
</SiteLayout>
);
};
export default NotFound;
