On visiting website localhost:3000/ I am navigating user to /home or /admin/dashboard based on roles saved in local storage.
When admin is logged in (role=admin in local storage) and I open new tab (as localhost:3000/) it gives me a splash screen of this:
This error is in console for a sec
Error: Rendered more hooks than during the previous render (NextJS)
Then after this it shows the /home for 2 sec. Then it navigates to /admin/dashboard
I want it to be smooth (direct navigation to /admin/dashboard)
I saw multiple posts on stackoverflow but cant get through with my problem
AuthGuard.jsx
"use client";
import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
const AuthGuard = ({ children }) => {
const router = useRouter();
useEffect(() => {
const role = localStorage.getItem('role');
const token = localStorage.getItem('custom-auth-token');
if (token) {
if (role === 'buyer') {
router.push('/home');
} else if (role === 'seller') {
router.push('/admin/dashboard');
}
} else {
// If no token is present, redirect to /home
router.push('/home');
}
}, [router]);
return <>{children}</>;
};
export default AuthGuard;
layout.jsx
import { Inter } from "next/font/google";
import "./globals.css";
import { ReduxProvider } from "@/redux/provider/redux-provider";
import AuthGuard from "@/components/auth/auth-guard";
const inter = Inter({ subsets: ["latin"] });
export const metadata = {
title: "Car Lease",
description: "Generated by create next app",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>
<AuthGuard>
<ReduxProvider>{children}</ReduxProvider>
</AuthGuard>
</body>
</html>
);
}
page.jsx
import { redirect } from 'next/navigation';
export default function Page() {
redirect('/home');
}
I want the navigation to be smooth (direct navigation to /admin/dashboard) I saw multiple posts on stackoverflow but cant get through with my problem