songtianlun/prmbr-image-mksaas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix hydration mismatch error caused by login wrapper

Browse Source
This commit is contained in:
javayhu 2025-04-25 20:35:51 +08:00
parent 5ff2436b15
commit 05014da6c7
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/auth/login-wrapper.tsx
View File

@ -8,9 +8,8 @@ import {
DialogTitle,
DialogTrigger,
} from '@/components/ui/dialog';
import { useLocalePathname, useLocaleRouter } from '@/i18n/navigation';
import { useLocaleRouter } from '@/i18n/navigation';
import { Routes } from '@/routes';
import { useSearchParams } from 'next/navigation';
import { useEffect, useState } from 'react';
interface LoginWrapperProps {
@ -27,8 +26,13 @@ export const LoginWrapper = ({
callbackUrl,
}: LoginWrapperProps) => {
const router = useLocaleRouter();
const [mounted, setMounted] = useState(false);
const [isModalOpen, setIsModalOpen] = useState(false);
useEffect(() => {
setMounted(true);
}, []);
const handleLogin = () => {
// append callbackUrl as a query parameter if provided
const loginPath = callbackUrl
@ -38,6 +42,12 @@ export const LoginWrapper = ({
router.push(loginPath);
};
// this is to prevent the login wrapper from being rendered on the server side
// and causing a hydration error
if (!mounted) {
return null;
}
if (mode === 'modal') {
return (
<Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>