Search code examples
reactjsnext.jsreact-hooksnext-routercustom-error-pages

No Longer Navigation Works After Automatic Redirect From 404 Page to Home Page Using next/router and useEffect()

I'm facing an issue with next/router. I made a '404 Page' and set it up to send clients back to the home page router.push('/') after some 3 seconds. However, when clients return to the main page, they get an console error that looks like this:

client.js:1 Error: Abort fetching component for route: "/"
    at handleCancelled (router.js:408:27)
    at Router.fetchComponent (router.js:1475:13)
    at async Router.getRouteInfo (router.js:1182:50)
    at async Router.change (router.js:778:29)

Due to this error, clients can't use <Link href="/{any_route_xyz}"> to navigate properly. In some cases, when they navigate to a page, it remains there for 3 seconds and then automatically pushes them back to the home page.

Here's the 404.jsx code :

import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import Head from "next/head";

export default function NotFound404() {
  
  const [time, setTime] = useState(3);
  const [tick, setTick] = useState(".");
  const router = useRouter();

  useEffect(() => {
    time > 0.01 && setTimeout(() => setTime((time - 0.01).toFixed(2)), 10);
    setTimeout(() => {
      setTick(tick.length < 3 ? tick + "." : "");
    }, 300);

    setInterval(() => {
      router.push("/");
    }, 3400);
  }, [time]);

  return (
    <main>
      <Head>
        <title>Page not found</title>
      </Head>
      <div className="flex flex-col justify-center items-center h-[75vh] w-full gap-10">
        <h1 className="text-6xl italic font-bold font-mono text-center">404! NOT FOUND!!</h1>
      </div>
      <p className="font-mono italic text-center">
        Returning back in {time} seconds {tick}
      </p>
    </main>
  );
}

And here's the code for navigation.jsx which is static component for every page:

<ul className="flex gap-14 mr-12">
  <li className="hover:underline">
    <Link href="/">Homepage</Link>
  </li>
  <li className="hover:underline">
    <Link href="/add">Add</Link>
  </li>
  <li className="hover:underline">
    <Link href="/contact">Contact</Link>
  </li>
  <li className="hover:underline">
    <Link href="/about">About</Link>
  </li>
</ul>

i tried using window.location='/' but it didn't worked.

Solution

  • I make the router to execute only once when variable time is 0 (You can use a boolean flag also)

    useEffect(() => {
  time > 0 && setTimeout(() => setTime((time - 0.01).toFixed(2)), 10);
  setTimeout(() => {
    setTick(tick.length < 3 ? tick + "." : "");
  }, 300);
  time == 0 && router.replace("/");
}, [time]);