When using router.query.slug in dynamic routes (/product_category/[slug]), the value may initially be undefined when navigating back. This can cause your data-fetching logic to fail or not re-run, leading to stale or missing content.

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function CategoryPage() {
  const router = useRouter();
  const { slug, isReady } = router;
  const [categoryData, setCategoryData] = useState(null);

  useEffect(() => {
    if (!isReady) return;

    const fetchData = async () => {
      const res = await fetch(`/api/category/${slug}`);
      const data = await res.json();
      setCategoryData(data);
    };

    fetchData();
  }, [slug, isReady]);

  if (!categoryData) return <div>Loading...</div>;

  return <div>{/* Render category content */}</div>;
}

Add key to Force Remount

Sometimes forcing a component remount can also help if state isn’t resetting correctly.