DEV Community

codeek
codeek

Posted on

🚀React Navigation Explained: Link vs useNavigate vs Redirect (Best Practices!)

#react #frontend #frontendchallenge

Navigation is one of the most fundamental concepts in React applications. Whether you're building a dashboard, an eCommerce store, or a portfolio website, knowing when to use Link, useNavigate, and Navigate (Redirect) will make your application more maintainable and provide a better user experience.

In this tutorial, we'll learn the differences between each navigation method, when to use them, and implement them step by step using React Router v7.

Prerequisites

Before starting, make sure you have:

  • Basic knowledge of React
  • Node.js installed
  • React Router installed

If you haven't installed React Router yet:

npm install react-router
Enter fullscreen mode Exit fullscreen mode

Project Structure 

src/
│── App.jsx
│── main.jsx
│── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Dashboard.jsx
│   └── Login.jsx
Enter fullscreen mode Exit fullscreen mode

Step 1: Configure React Router

First, wrap your application with BrowserRouter.

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")).render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);
Enter fullscreen mode Exit fullscreen mode

Now define your routes.

import { Routes, Route } from "react-router";
import Home from "./pages/Home";
import About from "./pages/About";
import Dashboard from "./pages/Dashboard";
import Login from "./pages/Login";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Step 2: Navigate Using Link

Link is used for navigation initiated by users.

Instead of refreshing the page like an HTML <a> tag, React Router updates the URL without reloading the application.

import { Link } from "react-router";

function Navbar() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/dashboard">Dashboard</Link>
    </nav>
  );
}
Enter fullscreen mode Exit fullscreen mode

✅ Best Use Cases

  • Navigation bars
  • Sidebar menus
  • Buttons behaving like links
  • Breadcrumb navigation

Why use Link?

  • No full page refresh
  • Faster navigation
  • Preserves application state
  • Better user experience

Step 3: Navigate Programmatically with useNavigate

Sometimes users shouldn't click a link.

Examples include:

  • Login success
  • Form submission
  • Checkout completed
  • Logout
  • Cancel button

For these situations, use useNavigate.

import { useNavigate } from "react-router";

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

  function handleLogin() {
    // authentication logic

    navigate("/dashboard");
  }

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

Replace Browser History

Prevent users from going back to the login page.

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

This replaces the current history entry.

Perfect for:

  • Login
  • Logout
  • Payment success
  • Password reset

Navigate Back 

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

Navigate forward.

navigate(1);
Enter fullscreen mode Exit fullscreen mode

Very useful for:

  • Back buttons
  • Multi-step forms
  • Wizards

Step 4: Redirect Using <Navigate />

Sometimes navigation should happen automatically.

For example:

  • User isn't logged in
  • User lacks permission
  • Page doesn't exist

Use the Navigate component.

import { Navigate } from "react-router";

function Dashboard() {
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return <h1>Dashboard</h1>;
}
Enter fullscreen mode Exit fullscreen mode

Instead of rendering the dashboard, React redirects users immediately.

Authentication Example

A common protected route looks like this.

import { Navigate } from "react-router";

function ProtectedRoute({ children }) {
  const isAuthenticated = false;

  if (!isAuthenticated) {
    return <Navigate to="/login" replace />;
  }

  return children;
}
Enter fullscreen mode Exit fullscreen mode

Usage:

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>
Enter fullscreen mode Exit fullscreen mode

Step 5: Which One Should You Use?

Situation Recommended
Navigation menu Link
Sidebar Link
User clicks page links Link
Login success useNavigate
Form submission useNavigate
Checkout completed useNavigate
Logout useNavigate
Authentication guard Navigate
Permission check Navigate
Redirect unknown pages Navigate

Common Mistakes

❌ Using <a> tags 

<a href="/dashboard">Dashboard</a>
Enter fullscreen mode Exit fullscreen mode

This refreshes the entire application.

Instead use:

<Link to="/dashboard">
  Dashboard
</Link>
Enter fullscreen mode Exit fullscreen mode

❌ Using useNavigate inside JSX

Incorrect:

return navigate("/login");
Enter fullscreen mode Exit fullscreen mode

Correct:

return <Navigate to="/login" replace />;
Enter fullscreen mode Exit fullscreen mode

❌ Using Link after Login

Avoid:

<Link to="/dashboard">
  Login
</Link>
Enter fullscreen mode Exit fullscreen mode

Instead:

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

Only navigate after authentication succeeds.

Best Practices

  • ✅ Use Link for user-initiated navigation.
  • ✅ Use useNavigate after events like login, form submission, or logout.
  • ✅ Use Navigate for conditional redirects.
  • ✅ Use replace: true when users shouldn't return to the previous page.
  • ✅ Avoid using HTML <a> tags for internal routing.
  • ✅ Keep navigation logic predictable and easy to maintain.

Conclusion

Choosing the correct navigation method keeps your React application clean, scalable, and user-friendly.

A simple rule to remember is:

  • Link → User clicks to navigate
  • useNavigate → Your JavaScript decides where to go
  • Navigate → React automatically redirects during rendering

Following these best practices will help you build applications that feel fast, modern, and intuitive.

📺 Prefer Watching Instead?

If you'd rather follow along with a complete walkthrough, check out the full video tutorial:

🎥 React Navigation Explained: Link vs useNavigate vs Redirect (Best Practices!)

https://www.youtube.com/watch?v=BBWF5pQbCeU

🛒 Learn to Build a Complete Modern React eCommerce App

If you want to go beyond navigation and build a real-world project from scratch, check out my complete React eCommerce series where you'll learn:

  • 🛍️ Product Listing
  • 🔍 Product Details
  • 🛒 Shopping Cart
  • ❤️ Wishlist
  • 🔐 Authentication & Authorization
  • 💳 Stripe Payment Integration
  • ☁️ Deployment
  • 📱 Responsive Design
  • ⚡ React Router
  • 🔥 Firebase
  • 🚀 Modern React Best Practices

🎥 Watch here:

https://www.youtube.com/watch?v=SdITjnl-zo8

If you found this article helpful, don't forget to ❤️ like, save, and follow for more React tutorials. Happy coding! 🚀

Top comments (1)

Collapse
 
topstar_ai profile image
Luis Cruz •

I particularly appreciated the distinction made between Link and useNavigate, highlighting that Link is ideal for user-initiated navigation, such as in navigation bars or sidebar menus, while useNavigate is better suited for programmatically handling navigation, like after a login or form submission. The example with navigate("/dashboard", { replace: true }) to prevent users from going back to the login page after a successful login is a great illustration of how to manage browser history effectively. One thing that might be worth exploring further is how to handle more complex navigation flows, such as those involving multiple redirects or conditional navigation based on user roles or permissions.