CODEWITHSUNDEEP
reactjsnext.js
civas88
civas88

Reputation: 31

useEffect is not firing after router.push in Next.js

After a login submission from login.jsx, the user gets navigated to index.jsx with router.push('/'). Both files (pages to be more specific) are located in root under /pages directory. And all pages automatically have Layout.jsx as layout. The Layout file has Nav.jsx component. Inside Nav.jsx, an useEffect hook is registered but the problem is: it never fires after router.push('/') I tried console.log() inside the hook but no luck. However, it does execute the hook when reloading the page or replacingrouter.push('/') by window.location.replace('/'). Here are my codes:

login.jsx:

... (previous code)
            axios.post(`/auth/login`, loginForm).then((res) => {
            const {data, token} = res.data;

            localStorage.setItem('auth_token', token);
            localStorage.setItem('user', JSON.stringify(data));

            router.push('/');
... (next code)

Layout.jsx:

import Head from 'next/head'
import Nav from "./Nav";

export default function Layout({children}) {
    return (
        <>
            <Head>
                <title>Super site!</title>
                <link rel="icon" href={"/favicon.ico"}/>
            </Head>
            <header>
                <Nav/>
            </header>
            <main>{children}</main>
            <footer>
                <h1>Super site footer</h1>
            </footer>
        </>
    )
}

Nav.jsx:

export default function Nav() {
    const router = useRouter();
    const [user, setUser] = useState(null);

    const logout = (e) => {
        e.preventDefault();

        axios.post(`/auth/logout`).then(() => {
            localStorage.removeItem('auth_token');
            localStorage.removeItem('user');

            router.replace('/');
            router.reload();
        }).catch((err) => {
            if (err.response) {
                toast.error(err.response.data.message, toasterOptions('error'));
            } else {
                toast.error(getServerErrorMessage(), toasterOptions('error'));
            }
        });
    }

    useEffect(() => {
        console.log('hi');
        const storedUser = JSON.parse(localStorage.getItem('user'));

        if (storedUser) setUser(storedUser);
    }, []);

    return (
        <>
            <nav className={'sm-nav'}>
                <input type="checkbox" name="menu-btn" id="menu-btn" className={'hidden menu-btn'}/>
                <ul className={'header-ul'}>
                    <li>
                        <Link href="/">
                            <a className={'logo'}>Devlanceer</a>
                        </Link>
                    </li>
                    <li>
                        <label htmlFor="menu-btn" className={'menu-icon bars'}>
                            <FontAwesomeIcon icon={"bars"} className={'md:hidden cursor-pointer'} size={'lg'}/>
                        </label>
                        <label htmlFor="menu-btn" className={'menu-icon times hidden'}>
                            <FontAwesomeIcon icon={"times"} className={'cursor-pointer'} size={'lg'}/>
                        </label>
                    </li>
                </ul>
                <ul className={'dropmenu'}>
                    {
                        user && (
                            <li>
                                <a onClick={logout} className={'pointered'}>Logout</a>
                            </li>
                        )
                    }
                    {
                        !user && (
                            <>
                                <li>
                                    <Link href={'/login'}>
                                        <a>Login</a>
                                    </Link>
                                </li>
                                <li>
                                    <Link href={'/register'}>
                                        <a>Create account</a>
                                    </Link>
                                </li>
                            </>
                        )
                    }
                </ul>
                <Toaster/>
            </nav>
            <nav className={'md-nav'}>
                <ul>
                    <li>
                        <Link href="/">
                            <a className={'logo'}>Super App</a>
                        </Link>
                    </li>
                </ul>
                <ul className={'block md:flex'}>
                    {
                        user && (
                            <li>
                                <a onClick={logout} className={'pointered'}>Logout</a>
                            </li>
                        )
                    }
                    {
                        !user && (
                            <>
                                <li>
                                    <Link href={'/login'}>
                                        <a className={'btn rounded-full'}>Login</a>
                                    </Link>
                                </li>
                                <li>
                                    <Link href={'/register'}>
                                        <a className={'btn rounded-full btn-primary'}>Create account</a>
                                    </Link>
                                </li>
                            </>
                        )
                    }
                </ul>
            </nav>
        </>
    )
}

How can I fix this? I want useEffect() hook to be executed on Nav.jsx component.

Upvotes: 3

Views: 4142

Answers (1)

MWO
MWO

Reputation: 2806

What happens if you write your location into the hook? from documentation:

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument.

useEffect(() => {
    console.log('hi');
    const storedUser = JSON.parse(localStorage.getItem('user'));

    if (storedUser) setUser(storedUser);
},[router.pathname]); // re-run the effect if your location changes, router.pathname or wherever your router stores the current location

Upvotes: 5

Related Questions