Programmatic Navigation with useNavigate

1. What is Programmatic Navigation?

Programmatic navigation is the act of changing the URL and rendering a new view using code, without direct user interaction with a link. It's triggered by events within your application's logic.

Common use cases include:

• Redirecting a user to their dashboard after a successful login.
• Navigating to a product's detail page after creating it via a form.
• Sending a user back to the previous page after they cancel an action.

To understand the basics of how this works in React Router, let's watch a short, practical video.

As the video demonstrates, the process is straightforward:

1. Import the hook: import { useNavigate } from 'react-router-dom';
2. Get the navigate function: Inside your component, call the hook to get the navigation function: const navigate = useNavigate();
3. Call the function: Use the navigate function with the desired path: navigate('/some-path');

2. A Practical Example: Implementing a Search Form

Let's apply this to our project. We'll add a simple form to our HomePage that lets a user search for a product. When the form is submitted, we'll programmatically redirect them to the products page with their search query in the URL.

1. Open your src/pages/HomePage.jsx file.
2. We'll need useState to manage the form input and useNavigate for the redirection.
3. Replace the content of HomePage.jsx with the following:

// src/pages/HomePage.jsx
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const HomePage = () => {
  const [searchTerm, setSearchTerm] = useState('');
  const navigate = useNavigate();

  const handleSearchSubmit = (e) => {
    e.preventDefault(); // Prevent the browser from reloading the page
    if (searchTerm.trim()) {
      // Navigate to the products page with the search term as a query parameter
      navigate(`/products?search=${searchTerm.trim()}`);
    }
  };

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to Our Store!</h1>
      <p>Your one-stop shop for amazing products.</p>
      
      <form onSubmit={handleSearchSubmit} style={{ marginTop: '20px' }}>
        <input
          type="text"
          placeholder="Search for a product..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          style={{ padding: '8px', width: '300px' }}
        />
        <button type="submit" style={{ padding: '8px 15px', marginLeft: '10px' }}>
          Search
        </button>
      </form>
    </div>
  );
};

export default HomePage;

Now, run your app, go to the home page, type something into the search bar, and hit "Search". You'll be immediately redirected to a URL like http://localhost:5173/products?search=your-term. We aren't handling the search functionality on the products page yet, but the redirection works perfectly!

3. Advanced Navigation and Common Patterns

The navigate function can do more than just simple redirects. Let's explore some common patterns you'll encounter, especially when dealing with authentication.

Controlling Browser History with replace: true

As you read in the article, one of the most important options is { replace: true }.

Imagine a user navigates from HomePage -> LoginPage -> DashboardPage.

• Without replace: If the user logs in and is sent to the dashboard, their browser history is [HomePage, LoginPage, DashboardPage]. If they click the browser's "Back" button from the dashboard, they'll go back to the LoginPage, which makes no sense.
• With replace: true: When you call navigate('/dashboard', { replace: true }), the LoginPage entry in the history stack is replaced by DashboardPage. The history becomes [HomePage, DashboardPage]. Now, if the user clicks "Back" from the dashboard, they correctly return to the HomePage.

This is the standard practice for redirects after login or registration.

Navigating Back and Forward

The navigate function can also act like the browser's back and forward buttons by passing a number:

• navigate(-1): Go back one page.
• navigate(1): Go forward one page.
• navigate(-2): Go back two pages.

This is useful for creating "Cancel" buttons that return the user exactly where they came from.

Conclusion

You've now mastered a fundamental part of React Router. Programmatic navigation with the useNavigate hook gives you full control over the user's journey through your application, enabling you to build dynamic and responsive user experiences.

Key Takeaways:

• Programmatic navigation is used to redirect users based on application logic, not just link clicks.
• The useNavigate hook provides the navigate function to perform these redirects.
• Common use cases include form submissions, authentication flows (login/logout), and timed redirects.
• The { replace: true } option is essential for authentication to prevent users from navigating back to pages like login or register after they've authenticated.
• You can navigate through the browser's history using navigate(-1) to go back.

Preview of the Next Lesson:

Our application routing is becoming quite robust. However, there's one last piece missing: what happens when a user tries to visit a URL that doesn't match any of our defined routes, like /non-existent-page? In our next lesson, we will implement a "catch-all" route to display a helpful "404 Not Found" page.