React useNavigate Hook

In the last lesson, React Navigation with NavLink, your menus highlighted the active page from a user’s click. This lesson is about the useNavigate hook, which lets your code change pages on its own with no click at all.

🤔 Why do we need useNavigate?

Links cover clicks, but plenty of navigation should happen automatically from your logic:

• After a successful login, you want to send the user to their dashboard.
• After submitting a form, you want to go to a “thank you” page.
• After deleting an item, you want to return to the list.
• None of these involve clicking a Link; the code decides to move.

So useNavigate is for navigation your code triggers. It gives you a function you call to go to any page, whenever your logic says so.

🧩 The basic shape

You call useNavigate() to get a navigate function, then call that function with the path you want.

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

function Home() {
  const navigate = useNavigate(); // get the navigate function

  function goToAbout() {
    navigate("/about"); // move to /about from code
  }

  return <button onClick={goToAbout}>Go to About</button>;
}

Read the two steps:

• const navigate = useNavigate() gives you a function for navigating.
• Calling navigate("/about") sends the app to /about, just like clicking a link to it.
• Here we call it inside a button handler, but you can call it from any logic, like after a fetch.

💡 Redirect after a form submit

The most common use is going to a new page after something succeeds, like a form submit:

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

function LoginForm() {
  const navigate = useNavigate();

  function handleSubmit(e) {
    e.preventDefault();
    // pretend we checked the login and it worked
    const loginWorked = true;

    if (loginWorked) {
      navigate("/dashboard"); // send the user to their dashboard
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Log in</button>
    </form>
  );
}

Walk through the flow:

• The user submits the form, so handleSubmit runs.
• We check whether the login worked (here it’s pretended).
• If it did, navigate("/dashboard") moves the app to the dashboard automatically.
• The user lands on the new page without clicking any link.

So the pattern is simple: do the work, then on success call navigate to move on. This is how almost every login and form redirect works.

⏪ Going back in history

navigate can also move through the browser history, like a back button. You pass a number instead of a path.

const navigate = useNavigate();

// go back one page, like the browser's back button
<button onClick={() => navigate(-1)}>Go back</button>

// go forward one page
<button onClick={() => navigate(1)}>Go forward</button>

Quick notes on the numbers:

• navigate(-1) goes back one step in history, the same as the back button.
• navigate(1) goes forward one step.
• This is handy for a “Back” button on a detail page, sending the user where they came from.

So a path moves to a specific page, and a number moves through history. Both come from the same navigate function.

🔁 Replace instead of adding to history

Sometimes you don’t want the user to be able to go back to a page, like the login page after they’ve logged in. You pass { replace: true } for that.

// after login, replace the login page in history
navigate("/dashboard", { replace: true });

Here’s what replace does:

• Normally navigate adds the new page to history, so back returns to the old one.
• With { replace: true }, the new page replaces the current one in history.
• So after login, pressing back won’t return to the login form, which is what you want.

⚠️ Common Mistakes

A common mistake is reaching for useNavigate when a plain Link would do. Code navigation is only for when there’s no click.

// ❌ overkill: a button with onClick just to go to a page the user clicks
<button onClick={() => navigate("/about")}>About</button>

// ✅ if it's a normal click-to-go link, just use Link
<Link to="/about">About</Link>

Keep these in mind:

• Don’t use useNavigate for plain clickable links. Use Link for those; it’s simpler and more accessible.
• Use useNavigate when code decides to move, like after a fetch, login, or submit.
• Remember the rules of hooks: call useNavigate at the top level of the component.

✅ Best Practices

A few habits for code navigation:

• Use useNavigate for navigation your logic triggers: after login, submit, delete, and so on.
• Use Link or NavLink for ordinary user-clicked navigation.
• Use navigate(-1) for a back button that returns the user where they came from.
• Use { replace: true } for redirects where the user shouldn’t go back, like after login.

🧩 What You’ve Learned

• ✅ useNavigate lets your code change pages, with no link click needed
• ✅ Call const navigate = useNavigate(), then navigate("/path") to move
• ✅ It’s perfect for redirects after a login, form submit, or delete
• ✅ navigate(-1) goes back and navigate(1) goes forward in history
• ✅ { replace: true } swaps the current page in history so the user can’t go back to it
• ✅ Use Link for plain clicks; use useNavigate only when code decides to move

🚀 What’s Next?

Now you can navigate from links and from code. Next you’ll add a 404 page to catch URLs that don’t exist.

React Handling 404 Pages