🧭 Programmatic Navigation

Link vs Navigate

Both a <Link> and useNavigate change the URL without a full page reload. The difference is who pulls the trigger. A <Link> is a piece of UI the user clicks — it renders a real anchor, works with middle-click and "open in new tab," and should be your default. useNavigate is for navigation that happens as a consequence of logic: an await resolving, a condition failing, a timer firing.

The useNavigate Hook

Call useNavigate() at the top of your component to get a navigate function, then call that function to move. It accepts a path string (absolute or relative), an options object, or a number to walk history.

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

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

  return (
    <div>
      {/* Absolute path — matches from the site root */}
      <button onClick={() => navigate('/about')}>About</button>

      {/* Relative path — resolved against the current route */}
      <button onClick={() => navigate('settings')}>Settings</button>

      {/* Replace the current history entry instead of pushing */}
      <button onClick={() => navigate('/login', { replace: true })}>Login</button>

      {/* Carry hidden state along with the navigation */}
      <button onClick={() => navigate('/profile', { state: { from: 'dashboard' } })}>
        Profile
      </button>

      {/* Walk the history stack */}
      <button onClick={() => navigate(-1)}>Back</button>
      <button onClick={() => navigate(1)}>Forward</button>
    </div>
  );
}

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

function Dashboard({ user }) {
  if (!user) return <Navigate to="/login" replace />;  // ✅ safe during render
  return <RealDashboard />;
}

Redirecting After Async Work

The most common use of useNavigate: do some async work, then move the user based on the result. A registration form submits, waits for the server, and on success sends the user to a welcome screen — on failure, it stays put and shows the error.

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

function RegistrationForm() {
  const navigate = useNavigate();
  const [form, setForm] = useState({ username: '', email: '', password: '' });
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);

    try {
      const { user } = await registerUser(form);
      // Success → move on, passing a little context to the next page:
      navigate('/welcome', { state: { user, isNewUser: true } });
    } catch (err) {
      // Failure → stay on the form and surface the message (don't navigate away)
      setError(err.message);
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* fields bound to form state ... */}
      {error && <p className="error">{error}</p>}
      <button type="submit" disabled={submitting}>
        {submitting ? 'Registering…' : 'Register'}
      </button>
    </form>
  );
}

replace & Location State

Push vs replace

By default navigate() pushes a new entry onto the history stack, so Back returns to where you were. Passing { replace: true } swaps the current entry instead — the page you left is forgotten. That's exactly what you want after a login or a completed checkout, so the Back button doesn't drop the user onto a form they already submitted.

Passing location state

The second argument's state field ships hidden data along with a navigation — not visible in the URL, ideal for "where did this person come from" or a one-time flag. Read it on the destination with useLocation.

// Source:
navigate('/order-success', { state: { orderId: result.id }, replace: true });

// Destination:
import { useLocation } from 'react-router-dom';

function OrderSuccess() {
  const location = useLocation();
  const orderId = location.state?.orderId;   // optional-chain: state may be null

  if (!orderId) return <Navigate to="/" replace />;   // opened directly, no state
  return <h1>Order {orderId} confirmed 🎉</h1>;
}

Moving Through History

Pass navigate a number to walk the history stack, exactly like the browser's Back and Forward buttons — no path needed.

navigate(-1);   // back one entry (like clicking Back)
navigate(1);    // forward one entry
navigate(-2);   // back two entries

// A "Cancel" button that returns wherever the user came from:
function CancelButton() {
  const navigate = useNavigate();
  return <button onClick={() => navigate(-1)}>Cancel</button>;
}

Why it matters: relative history moves keep components decoupled from the app's route map. A modal's Close button that calls navigate(-1) works no matter which page opened it — you don't have to hard-code a destination.

Protected Routes

Programmatic navigation shines for auth guards. A protected wrapper checks for a logged-in user and, if there isn't one, redirects to the login page — while remembering where the user was headed so you can send them back after they sign in.

import { Navigate, useLocation } from 'react-router-dom';

// Declarative guard — redirect happens during render, safely:
function RequireAuth({ children }) {
  const { user } = useAuth();
  const location = useLocation();

  if (!user) {
    // Stash the attempted location so login can return here:
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
}

// Usage in the route tree:
<Route
  path="/dashboard"
  element={
    <RequireAuth>
      <Dashboard />
    </RequireAuth>
  }
/>

Now the login form reads that saved location and returns the user to it — the "resume where you left off" experience users expect.

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

  const handleLogin = async (e) => {
    e.preventDefault();
    const { user, token } = await loginUser(credentials);
    localStorage.setItem('token', token);

    // Back to the intended page, or /dashboard as a fallback:
    const from = location.state?.from?.pathname || '/dashboard';
    navigate(from, { replace: true });   // replace so Back doesn't return to login
  };

  return <form onSubmit={handleLogin}>{/* fields */}</form>;
}

Practice & Quiz

async function handleCreate(data) {
  // TODO: await savePost, then navigate to the new post's page
}

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

  const handleCreate = async (data) => {
    const { id } = await savePost(data);
    navigate(`/posts/${id}`, { replace: true });
  };

  return <PostEditor onSave={handleCreate} />;
}

const from = location.state?.from?.pathname || '/dashboard';
navigate(from, { replace: true });

Best Practices & Pitfalls

✅ Do

• Default to <Link> for user-clickable destinations; use useNavigate for code-driven moves
• Redirect with { replace: true } after logins and completed one-way flows
• Wrap navigation after await in try/catch and handle failures gracefully
• Pass a small id in location state and re-fetch, rather than a whole object
• Use <Navigate> for redirects that happen during render

❌ Don't

• Call navigate() in the render body — put it in a handler or effect
• Redirect to an error page on every failure and lose the user's input
• Rely on location state surviving a refresh — always guard for its absence
• Blindly navigate(-1) when a specific parent path is what you actually mean

// ❌ Ships an entire object through history — bloated and fragile
navigate('/details', { state: { item } });

// ✅ Pass an id; re-fetch on the destination
navigate('/details', { state: { id: item.id } });

Summary

📚 Additional Resources

• React Router — useNavigate
• React Router — Navigate component
• React Router — useLocation
• MDN — History API

🚀 What's Next?

You've finished the Advanced Routing track — your app can nest layouts, read the URL, and steer itself. Next we turn to making it fast: React.memo & useMemo, the tools for skipping unnecessary re-renders and expensive recalculations.