Next.js Discord

Discord Forum

router.push() / router.replace() not working

Answered
Thrianta posted this in #help-forum
Open in Discord
ThriantaOP
i.m using useRouter provided by next/navigation but these methods seem to do nothing

const handleSortChange = (updatedSort: string) => {
    const updatedQuery = new URLSearchParams({
      sort: updatedSort,
      season: seasonSelected,
    });

    console.log(updatedQuery.toString());
    router.replace(`${path}?${updatedQuery.toString()}`); // does nothing
    window.location.replace(`${path}?${updatedQuery.toString()}`); // works
  };

  const handleSeasonChange = (updatedS: string) => {
    const updatedQuery = new URLSearchParams({
      sort: sortSelected,
      season: updatedS,
    });

    console.log(updatedQuery.toString());
    router.replace(`${path}?${updatedQuery.toString()}`); // does nothing
    window.location.replace(`${path}?${updatedQuery.toString()}`); // works
  };


am i doing something wrong?
Answered by Thrianta
It was an error on my end where the useEffect hook had a dependency that was being updated each render making page go into loops, error itself was actually not in the code I provided but another custom hook usePaginatedQuery sorry!
View full answer

2 Replies

ThriantaOP
complete component 

const FilterComponent: FC<FilterComponentProps> = ({ sort, season }) => {
  const [sortSelected, setSortSelected] = useState(
    sortOptions.find((option) => option.value === sort)?.value || sortOptions[0].value,
  );
  const [seasonSelected, setSeasonSelected] = useState(
    seasonOptions.find((option) => option.value === season)?.value || seasonOptions[0].value,
  );

  const router = useRouter();
  const path = usePathname();
  const searchParams = useSearchParams();

  const createQueryString = useCallback(
    (name: string, value: string) => {
      const params = new URLSearchParams(searchParams as unknown as URLSearchParams);
      params.set(name, value);

      return params.toString();
    },
    [searchParams],
  );

  const handleSortChange = useCallback(
    (newSort: string) => {
      setSortSelected(newSort);

      const params = createQueryString('sort', newSort);
      router.push(`${path}?${params.toString()}`);
    },
    [createQueryString, path, router],
  );

  const handleSeasonChange = useCallback(
    (newSeason: string) => {
      setSeasonSelected(newSeason);

      const params = createQueryString('season', newSeason);
      router.push(`${path}?${params.toString()}`);
    },
    [createQueryString, path, router],
  );

  useEffect(() => {
    handleSortChange(sortSelected);
  }, [sortSelected]);

  useEffect(() => {
    handleSeasonChange(seasonSelected);
  }, [seasonSelected]);

  return (
    // ...
  );
};
ThriantaOP
It was an error on my end where the useEffect hook had a dependency that was being updated each render making page go into loops, error itself was actually not in the code I provided but another custom hook usePaginatedQuery sorry!
Answer