🧭 React Navigation with useNavigate & <Link> – Programmatic & Declarative Routing (2025)

---

🧲 Introduction – Why Navigation Matters in React

In Single Page Applications (SPAs) built with React.js, navigation must be handled client-side without triggering full page reloads. React Router provides two main tools for this:

• <Link> for declarative navigation
• useNavigate() for programmatic navigation

These tools offer flexibility, accessibility, and a seamless user experience.

🎯 In this guide, you’ll learn:

• When to use <Link> vs useNavigate
• How to implement page transitions
• Handle redirects and button-based navigation
• Best practices for navigation in modern React apps

---

🧭 1. Declarative Navigation with <Link>

<Link> is a React Router component that renders an anchor tag but handles navigation without reloading the page.

✅ Basic Usage:

import { Link } from 'react-router-dom';

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

✅ Advantages:

• No page reloads
• Built-in accessibility
• Works with nested routes
• Easy to use in menus, sidebars, or navbars

---

🎯 2. Active Links with <NavLink>

<NavLink> is like <Link>, but it adds styling for active routes.

✅ Example:

import { NavLink } from 'react-router-dom';

<NavLink
  to="/dashboard"
  className={({ isActive }) => (isActive ? 'active-link' : '')}
>
  Dashboard
</NavLink>

📌 Useful for tabs, sidebars, and breadcrumbs

---

⚙️ 3. Programmatic Navigation with useNavigate()

React Router’s useNavigate() hook lets you navigate in response to logic, like after submitting a form or clicking a button.

✅ Example:

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

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

  const handleClick = () => {
    navigate('/profile');
  };

  return <button onClick={handleClick}>Go to Profile</button>;
}

---

🔁 4. Redirect After Action

You can redirect after authentication, form submission, or API response.

Example – Redirect after login:

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

  const handleLogin = () => {
    // Simulate login
    navigate('/dashboard');
  };

  return <button onClick={handleLogin}>Login</button>;
}

📘 navigate() replaces history.push() from older versions

---

🔄 5. Navigate with State or Replace

✅ Replace History Entry:

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

📌 Prevents adding the route to browser history (like redirects)

✅ Pass State Between Routes:

navigate('/success', { state: { from: 'checkout' } });

Access state with useLocation() in target component:

const location = useLocation();
console.log(location.state.from); // 'checkout'

---

🧩 6. Navigation in Nested Routes

Use relative or absolute paths for child routes.

<Link to="settings">Settings</Link> // relative to parent route
<Link to="/dashboard/settings">Settings</Link> // absolute path

✅ Prefer relative links inside nested components for cleaner paths

---

📘 Best Practices for Navigation

✅ Use <Link> for static navigation (menus, buttons)
✅ Use useNavigate() for logic-driven redirects
✅ Avoid using raw <a href> unless pointing to external URLs
✅ Style active links with <NavLink>
✅ Use replace: true for redirects like login/logout

---

📌 Summary – Recap & Next Steps

React Router’s <Link> and useNavigate() give you both declarative and programmatic control over navigation. Mastering both ensures smooth transitions, flexible logic handling, and great UX across your React app.

🔍 Key Takeaways:

• Use <Link> for UI navigation without page reloads
• Use <NavLink> for highlighting active routes
• Use useNavigate() to redirect or trigger routing after events
• Navigate with state and replace browser history when needed
• Keep navigation logic clean, modular, and accessible

⚙️ Real-World Relevance:
Used in all React apps with routing—from eCommerce sites with checkout flows to dashboards, admin panels, and blogs with category filters and detail pages.

---

❓ FAQ Section

❓ When should I use useNavigate() over <Link>?
✅ Use useNavigate() when you need to redirect after an action, like a successful form submission or login.

---

❓ How do I pass data using navigate()?
✅ Use the state option:

navigate('/thank-you', { state: { orderId: 123 } });

---

❓ Can I use both navigate() and <Link> in the same app?
✅ Yes! They serve different purposes and can coexist seamlessly.

---

❓ What’s the difference between navigate('/path') and navigate('/path', { replace: true })?
✅ replace: true replaces the current history entry instead of pushing a new one, useful for redirects.

---

❓ How do I highlight the current page in a menu?
✅ Use <NavLink> and the isActive prop to conditionally apply CSS classes.

---

Share Now :