typescript - Πώς να αλλάξετε σελίδα στο next js με react-router-dom

Θέλω να αλλάξω τη σελίδα αν η σύνδεση ήταν επιτυχής, αλλά λαμβάνω αυτό το μήνυμα σφάλματος:

με αυτόν τον κώδικα:

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);
  }
  ......

Απάντηση #1

Το Next.js παρέχει το δικό του router. Δεν χρειάζεται να χρησιμοποιήσετε το react-router-dom. Συνιστώ έντονα να ρίξετε μια ματιά στην σχετική τεκμηρίωση.

Κατά τη χρήση του καταλόγου σελίδων

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

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

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

  return (
    // ...
  );
}

Κατά τη χρήση του καταλόγου εφαρμογών

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

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

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

  return (
    // ...
  );
}

Απάντηση #2

Το πρόβλημα είναι ότι παραβιάζετε τους κανόνες των hooks καλώντας ένα React hook από μια συνάρτηση ανάκλησης. Τα React hooks πρέπει να καλούνται μόνο στο ανώτατο επίπεδο, π.χ. στο σώμα ενός λειτουργικού component του React ή ενός προσαρμοσμένου React hook.

Μετακινήστε το hook useNavigate εκτός της συνάρτησης ανάκλησης.

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);
    }

  ...