Saleh Mubashar

Posted on Oct 28, 2021 • Edited on Dec 29, 2023

useNavigate tutorial React JS

#programming #javascript #react #webdev

Hi guys !.

In this post we will learn how to use the useNavigate hook in React JS. useNavigate is part of React Router and has replaced useHistory, although it is similar to useHistory, but with more useful features.

useNavigate is a new hook introduced in React Router v6 and it is extremely useful and easy to use.

Uses:

Go to the previous or next pages
Redirect user to a specific Url

Check out my blog.

Step 1:

Install React Router as useNavigate is part of the react router dom package. Install using the following 2 commands:

Note : useNavigate is only available in React Router Dom v6

npm install history@5 react-router-dom@6

Step 2:

Import useNavigate from React Router using the following code. This line of code can be added in any react class or function (however we are using a functional component in this example).



import { useNavigate } from 'react-router';

Step 3:

Now we will assign the useNavigate() function to a variable for ease of use. Add the following code:



let navigate = useNavigate();

Step 4:

Now you can use the variable name anywhere to navigate to a page, previous page or next page.

Example 1:

Redirect user to another page:



function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home')
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

In the above code, the navigate('/home') is used to redirect the user on button click.

Example 2:

In this example, we will see how to redirect to previous page:



function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(-1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );
}

Example 3:

In this example, we will see how to redirect user to the next page (in history)



function Redirect() {
  let navigate = useNavigate();
  function handleClick() {
    navigate(1)
  }
  return (
    <div>
      <button onClick={handleClick}>go home</button>
    </div>
  );

As you can see in the above two examples, -1 is used to go to the previous page while 1 is used to go to the next page.

Check Out my latest tutorial on Hubapages

Thank you all for reading this post!
If you learnt something new, you can buy me a coffee to support my work!
Cheers! 🎉

Top comments (19)

Vishma Pratim Das • May 22 '22

Hey,
so according to react router documentation, useNavigate() returns a method that allows us to navigate from one link to another. We don't store it inside the navigate variable. It is a hook. It is not a regular function. When we assign useNavigate() to navigate, the hook gets called and the method gets returned, which is stored inside it.

nvg-rae • Nov 28 '21

Thanks for bearing with a newbie comment! I used to be able to just do this.props.history.push(/Welcome) in my class component to go to a new route from the click handler in a class component. Now I need to create an entire functional component just to use that "extremely useful and easy to use" function? Any tips on how to handle that in a class component are greatly appreciated.

Saleh Mubashar • Nov 28 '21 • Edited

Hi
Ok so the problem is that you can not use this prop in class components because the children components must use react hooks to access the route context which is only possible with functional components.
Check this out: stackoverflow.com/questions/647829...

nvg-rae • Nov 28 '21

Thank you for taking a look, Saleh!

Saleh Mubashar • Nov 28 '21 • Edited

no problem :).
if you have any questions, you can always reach out to me on twitter
cheers :)

Fahad Ashiq • Feb 24 '22

Very Useful.

Bennett B Madavana • Nov 10 '22

Thanks for the article,
Is it okay to use a button instead of an anchor tag when you're redirecting to another page? won't it cause accessibility issues?

Piero Sabino • Jan 19 '22

Hi, I have a problem, watching a video on youtube that used history.push ('/ login? redirect = shipping'), how can I modify it using navigate, because if I use the string "navigate ('/ login? redirect = shipping') even if logged in it returns to home page and does not go to the shipping page.

siyan_david • Mar 27 '22

Sorry did you figure it out im having same issue

Sudip Sarkar • Jul 19

In my case , it's not working sir , kindly help me out .

`import { json, Link, Navigate, useNavigate } from "react-router-dom";
import { useState } from "react";

import XSvg from "../../components/svgs/X";

import { MdOutlineMail } from "react-icons/md";
import { FaUser } from "react-icons/fa";
import { MdPassword } from "react-icons/md";
import { MdDriveFileRenameOutline } from "react-icons/md";
import { useMutation, useQuery } from "@tanstack/react-query";

import { toast } from "react-hot-toast";

const RegisterPage = () => {
const [formData, setFormData] = useState({
email: "",
username: "",
fullName: "",
password: "",
});
const navigate = useNavigate();

const {
    mutate: signup,
    isError,
    isPending,
    error,
} = useMutation({
    mutationFn: async ({ email, username, fullName, password }) => {
        try {
            const res = await fetch("/api/v1/auth/signup", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ fullName, username, email, password }),
            });

            const resData = await res.json();
            if (resData.error)
                throw new Error(resData.message || "Failed to create account");
        } catch (error) {
            throw error;
        }
    },
    onSuccess: () => {
        toast.success("Signed up successfully");
        navigate("/");
    },
    onError: (error) => {
        console.error(error.message);
        toast.error(error.message);
    },
});
const handleSubmit = (e) => {
    e.preventDefault();
    signup(formData);
};

const handleInputChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
};

return (
    <div className="max-w-screen-xl mx-auto flex h-screen px-10">
        <div className="flex-1 hidden lg:flex items-center  justify-center">
            <XSvg className=" lg:w-2/3 fill-white" />
        </div>
        <div className="flex-1 flex flex-col justify-center items-center">
            <form
                className="lg:w-2/3  mx-auto md:mx-20 flex gap-4 flex-col"
                onSubmit={handleSubmit}
            >
                <XSvg className="w-24 lg:hidden fill-white" />
                <h1 className="text-4xl font-extrabold text-white">Join today.</h1>

                <label className="input input-bordered rounded flex items-center gap-2">
                    <MdOutlineMail />
                    <input
                        type="email"
                        className="grow"
                        placeholder="Email"
                        name="email"
                        onChange={handleInputChange}
                        value={formData.email}
                    />
                </label>
                <div className="flex gap-4 flex-wrap">
                    <label className="input input-bordered rounded flex items-center gap-2 flex-1">
                        <FaUser />
                        <input
                            type="text"
                            className="grow "
                            placeholder="Username"
                            name="username"
                            onChange={handleInputChange}
                            value={formData.username}
                        />
                    </label>
                    <label className="input input-bordered rounded flex items-center gap-2 flex-1">
                        <MdDriveFileRenameOutline />
                        <input
                            type="text"
                            className="grow"
                            placeholder="Full Name"
                            name="fullName"
                            onChange={handleInputChange}
                            value={formData.fullName}
                        />
                    </label>
                </div>
                <label className="input input-bordered rounded flex items-center gap-2">
                    <MdPassword />
                    <input
                        type="password"
                        className="grow"
                        placeholder="Password"
                        name="password"
                        onChange={handleInputChange}
                        value={formData.password}
                    />
                </label>
                <button className="btn rounded-full btn-primary text-white">
                    {isPending ? "Loader..." : "Sign up"}
                </button>
                {isError && <p className="text-red-500">Something went wrong</p>}
            </form>
            <div className="flex flex-col lg:w-2/3 gap-2 mt-4">
                <p className="text-white text-lg">Already have an account?</p>
                <Link to="/login">
                    <button className="btn rounded-full btn-primary text-white btn-outline w-full">
                        Sign in
                    </button>
                </Link>
            </div>
        </div>
    </div>
);

};
export default RegisterPage;
`