Exploring the process of navigating between pages in Next.js using react-router-dom

Question

Exploring the process of navigating between pages in Next.js using react-router-dom

Whenever a successful login occurs, I want to redirect the user to a different page. However, I am encountering an error message:

https://i.sstatic.net/Wi8XW.png

This is the snippet of code that is causing the issue:

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

typescript next.js react-router-dom

Answer 1

Answer №1

Next.js has its own built-in router, eliminating the need for react-router-dom. I highly suggest exploring the associated documentation for more insight.

Utilizing the pages directory

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

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

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

  return (
    // ...
  );
}

When utilizing the app directory

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

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

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

  return (
    // ...
  );
}

Answer 2

Next.js has its own built-in router, eliminating the need for react-router-dom. I highly suggest exploring the associated documentation for more insight.

Utilizing the pages directory

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

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

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

  return (
    // ...
  );
}

When utilizing the app directory

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

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

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

  return (
    // ...
  );
}

Answer 3

Answer №2

It appears that there is an issue with violating the rules of React hooks by invoking a React hook within a callback function. React hooks should only be invoked at the top level, such as within the body of a React function component or a custom React hook.

To resolve this issue, move the useNavigate hook outside of the callback.

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

  ...

Answer 4

It appears that there is an issue with violating the rules of React hooks by invoking a React hook within a callback function. React hooks should only be invoked at the top level, such as within the body of a React function component or a custom React hook.

To resolve this issue, move the useNavigate hook outside of the callback.

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

  ...

Exploring the process of navigating between pages in Next.js using react-router-dom

Answer №1

Utilizing the pages directory

When utilizing the app directory

Answer №2

Similar questions

Unreliable Environment Variable Behavior in Next.js 13.4 App Deployed on Cloud Run

Guide to Dynamically Including an Element in an Array using Typescript

Using TypeScript path aliases to resolve import errors

What could be causing React to generate an error when attempting to utilize my custom hook to retrieve data from Firebase using context?

What is the best way to incorporate data from a foreach method into a function call within an HTML string?

Exploring the use of national flag emojis in VS code

Exporting a module from a TypeScript definition file allows for seamless sharing

How can I display the top 5 data results after subscribing in Nativescript?

Implementing validation logic on button click using TypeScript

What is the best way to import a data type from another file into a `.d.ts` file without converting it into a module?

The name 'XXX' is nowhere to be found

Enhancing Test Components with Providers in "React Testing Library": A Step-by-Step Guide

Mixing Jest and Cypress in a TypeScript environment can lead to Assertion and JestMatchers issues

Using [file_id] as a dynamic parameter in nextjs pages

Switch one button at a time within the form

Uncover the mystery behind the return value of a generic function in TypeScript

Loop through every item in Typescript

Dealing with Excessive Requests in a NextJS Application Routing Layout

Typescript types can inadvertently include unnecessary properties

Having trouble utilizing yarn to import Mapbox into TypeScript