DEV Community

Cover image for Stop Using Links the Wrong Way — Master useNavigate in React
Kathirvel S
Kathirvel S

Posted on

Stop Using Links the Wrong Way — Master useNavigate in React

#javascript #webdev #beginners #react

Hey… welcome back 👋

If you made it here, you’re not just learning React anymore —
you’re starting to think like a React developer.

In Episode 3, we set up the foundation with Browser Router — basically giving our app a navigation system.

But now comes the real question…

“Okay… routing is set. But how do I actually control navigation with logic?”

Because let’s be honest —
real apps don’t just wait for users to click links.

They:

  • redirect after login
  • protect private pages
  • move users based on conditions
  • respond to actions instantly

👉 And this… is exactly where useNavigate steps in.

What is useNavigate?

Let’s slow this down and really understand it.

At its core, useNavigate is a React hook that lets you change routes (pages) using JavaScript code instead of user clicks.

In simple terms:

It gives you control over when and where a user should move inside your app.

Normally in a website, navigation happens when a user clicks something.
But with useNavigate, navigation can happen because your logic decided it should happen.

What does that actually mean?

  • You don’t have to wait for a user to click a link
  • You can trigger navigation inside functions, conditions, API responses, or events
  • Your app becomes smarter and more responsive

Think of it like this:

Instead of the user driving the app, sometimes the app drives the user.

Why Does useNavigate Exist?

To understand this properly, you need to compare traditional websites vs React apps.

Traditional Website Navigation

In a normal website:

  • User clicks a link
  • Browser requests a new page from the server
  • Entire page reloads

This is slow and breaks the user experience.

React (Single Page Application) Navigation

React works differently.

It’s a Single Page Application (SPA), which means:

  • The page does not fully reload
  • Only the required components update
  • Navigation feels instant and smooth

But here’s the catch:

If there are no full page reloads… how do we move between pages?

That’s where React Router comes in (Episode 3).
And useNavigate is part of that system.

The Real Reason useNavigate Exists

Let’s move into real-world thinking.

Modern apps are not just about showing pages. They are about flows.

Real-Time Scenarios

  • After login → go to dashboard
  • After form submission → go to success page
  • If user is not logged in → redirect to login
  • If payment is successful → show confirmation page

These are not user-click actions. These are logic-driven decisions.

That is exactly why useNavigate exists.

Real-Time Examples

1. After Login 

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

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

  const handleLogin = () => {
    const isAuthenticated = true;

    if (isAuthenticated) {
      navigate("/dashboard");
    }
  };

  return <button onClick={handleLogin}>Login</button>;
}
Enter fullscreen mode Exit fullscreen mode

2. After Form Submission 

const handleSubmit = () => {
  navigate("/thank-you");
};
Enter fullscreen mode Exit fullscreen mode

3. Protecting Private Routes 

if (!user) {
  navigate("/login");
}
Enter fullscreen mode Exit fullscreen mode

4. Auto Redirect After Delay 

setTimeout(() => {
  navigate("/");
}, 3000);
Enter fullscreen mode Exit fullscreen mode

Where Can You Use useNavigate?

Important rule:

useNavigate can only be used inside:

  • React functional components
  • Custom hooks

How to Use useNavigate (Step by Step)

1. Import 

import { useNavigate } from "react-router-dom";
Enter fullscreen mode Exit fullscreen mode

2. Initialize 

const navigate = useNavigate();
Enter fullscreen mode Exit fullscreen mode

3. Use 

navigate("/home");
Enter fullscreen mode Exit fullscreen mode

Additional Useful Patterns (Real Understanding)

These patterns are used heavily in real applications.

1. Go Back to Previous Page 

navigate(-1);
Enter fullscreen mode Exit fullscreen mode

Meaning

Works like browser back button.

  • -1 → go back one page
  • -2 → go back two pages

Example Flow

Home → Products → Product Details

navigate(-1);
Enter fullscreen mode Exit fullscreen mode

You return to Products page.

2. Replace Current Page (No Back Navigation) 

navigate("/home", { replace: true });
Enter fullscreen mode Exit fullscreen mode

Meaning

Replaces current page in history.

User cannot go back to previous page.

Real Example: Login 

const handleLogin = () => {
  navigate("/dashboard", { replace: true });
};
Enter fullscreen mode Exit fullscreen mode

Without replace → user goes back to login page
With replace → login page is removed from history

3. Pass Data While Navigating 

navigate("/profile", {
  state: { name: "John" }
});
Enter fullscreen mode Exit fullscreen mode

Meaning

Send temporary data to another page.

Receiving Data 

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

function Profile() {
  const location = useLocation();
  console.log(location.state.name);
}
Enter fullscreen mode Exit fullscreen mode

Real Use Case 

navigate("/profile", {
  state: { userId: 5, name: "John" }
});
Enter fullscreen mode Exit fullscreen mode

Link vs useNavigate

Scenario Use
User clicks navigation Link
Logic decides navigation useNavigate

Common Mistakes Beginners Make (and How to Avoid Them)

1. Using useNavigate Outside Component

Hooks only work inside components.

2. Forgetting Router Setup

Make sure BrowserRouter is configured (Episode 3).

3. Overusing useNavigate

Don’t replace all links with it.

4. Navigating Before Logic Completes

Always wait for API success or conditions.

5. Ignoring Edge Cases

Handle failures before redirecting.

Simple Way to Remember

  • User action → Link
  • App logic → useNavigate

Final Thoughts

useNavigate is not just about switching pages.

It allows you to:

  • Control user flow
  • Build real-world app behavior
  • Create smooth, intelligent navigation

Once you understand this, you stop thinking in pages and start thinking in user journeys.

See you in next one

This is Episode 4 of the series “Let’s Master React Hooks Together.”

Full series here:
👉 https://dev.to/kathirvel-s/series/39103

In the next episode, we’ll explore another powerful concept that helps your React apps become even more dynamic and interactive.

Until then, try building a small project using useNavigate. That’s where real understanding begins.

Top comments (0)