useNavigate() in React Router

When building a React application, we often need to move users from one page to another.

For example:

• After login, move the user to the Home page.
• After submitting a form, move to the Success page.
• After clicking a button, open the Cart page.

We can use useNavigate() to do this.

1. What is useNavigate()?

useNavigate() is a Hook provided by React Router.

It helps us move from one page to another using JavaScript.

In simple words, useNavigate() allows us to change pages when an action happens.

2. How to use useNavigate()

First, import useNavigate from React Router:

import { useNavigate } from "react-router-dom";

Inside your component, call it:

const navigate = useNavigate();

Now, we can use navigate() to move to another page.

3. Navigate to Another Page

Let's say we have a Home page and an About page.

import { useNavigate } from "react-router-dom";

function Home() {

  const navigate = useNavigate();

  return (
    <div>
      <h1>Home Page</h1>

      <button onClick={() => navigate("/about")}>
        Go to About
      </button>
    </div>
  );
}

export default Home;

How does it work?

1. useNavigate() gives us a navigation function.
2. We store it in the navigate variable.
3. When the button is clicked, navigate("/about") runs.
4. The user moves to the About page.

4. Navigate After Login

We can use useNavigate() to move users to another page after a successful login.

import { useNavigate } from "react-router-dom";

function Login() {

  const navigate = useNavigate();

  function handleLogin() {

    // Example of a successful login
    const isLoggedIn = true;

    if (isLoggedIn) {
      navigate("/home");
    }
  }

  return (
    <div>
      <h2>Login Page</h2>

      <button onClick={handleLogin}>
        Login
      </button>
    </div>
  );
}

export default Login;

Here, when the login succeeds, the user is moved to the Home page.

Note: This is a simple example. A real login system must verify the user's credentials.

5. Going Back and Forward

We can also use useNavigate() to move through browser history.

Go back:

navigate(-1);

This takes the user to the previous page.

Go forward:

navigate(1);

This moves the user to the next page in browser history, if one exists.

6. What is replace: true?

Normally, when we navigate to another page, the browser adds that page to its history.

But sometimes we want to replace the current page instead.

We can do this:

navigate("/home", { replace: true });

This replaces the current history entry instead of adding a new one.

It can be useful after login or logout when we don't want the previous page to remain in that history position.

7. Link vs useNavigate()

Both are used to navigate between pages, but they are used in different situations.

Link	useNavigate()
Used for normal navigation links	Used for navigation through JavaScript
Example: menu links	Example: redirect after login
Uses to	Uses navigate()

Using Link:

<Link to="/about">About</Link>

Using useNavigate():

navigate("/about");

8. Important Points to Remember

• useNavigate() is a Hook from React Router.
• It must be called inside a React component or custom Hook.
• navigate("/about") moves to another page.
• navigate(-1) goes back.
• navigate(1) goes forward.
• replace: true replaces the current history entry.