typescript - Jak změnit stránku v Next.js s react-router-dom

Chci změnit stránku, pokud bylo přihlášení úspěšné, ale dostávám tuto chybovou zprávu:

s tímto kódem:

export default function SignUp() {
  const trigger = async (event: any) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const navigate = useNavigate();
    try {
      const response = await fetchRestEndpoint(`/users`, 'POST', {
        username: data.get("username"),
        email: data.get("email"),
        password: data.get("password"),
        role: "user"
      });
    if (response.ok) {
      const user: any = await response.json();
      console.log(user);
      navigate('/');
    }
  } catch(e) {
    alert(e);
  }
  ......

Odpověď č. 1

Next.js poskytuje vlastní router. Nemusíte používat react-router-dom. Důrazně doporučuji podívat se na související dokumentaci.

Při používání adresáře stránek

import { useCallback } from "react";
import { useRouter } from "next/router";

const MyComponent = () => {
  const router = useRouter();

  const login = useCallback(() => {
    // ...
    router.push("/some-url")
  }, [router]);

  return (
    // ...
  );
}

Při používání adresáře aplikací

import { useCallback } from "react";
import { useRouter } from "next/navigation";

const MyComponent = () => {
  const router = useRouter();

  const login = useCallback(() => {
    // ...
    router.push("/some-url")
  }, [router]);

  return (
    // ...
  );
}

Odpověď č. 2

Problém je v tom, že porušujete pravidla hooků tím, že voláte React hook z callback funkce. React hooky musí být volány pouze na nejvyšší úrovni, např. v těle React funkční komponenty nebo vlastního React hooku.

Přesuňte háček useNavigate mimo zpětné volání.

export default function SignUp() {
  const navigate = useNavigate(); // <-- call in function body

  const trigger = async (event: any) => {
    event.preventDefault();
    const data = new FormData(event.currentTarget);

    try {
      const response = await fetchRestEndpoint("/users", "POST", {
        username: data.get("username"),
        email: data.get("email"),
        password: data.get("password"),
        role: "user"
      });

      if (response.ok) {
        const user: any = await response.json();
        console.log(user);
        navigate('/');
      }
    } catch(e) {
      alert(e);
    }

  ...