How do I redirect to a functionally different page (without reloading the page) in Nextjs?

[emrahaydemir]

Hello, I am trying to redirect to a functionally different page in nextjs. The redirection is successful but the page is reloaded. I tried react-router-dom, but this doesn't work. I searched on the github but couldn't find any result. Is there any way to do this?

import { useRouter } from "next/navigation";

const router = useRouter();

loginSchema.validate(formData, { abortEarly: false })
                .then(() => {
                  setIsLoading(true);
                  Login(formData)
                    .then((res) => {
                      console.log(res);
                      router.push("/");
                    })
                    .catch((err) => {})
                    .finally(() => {
                      setIsLoading(false);
                    });
                })