Programmatic Navigation

Programmatic navigation allows you to change the route or page in your React application without directly interacting with the browser’s address bar. It enables navigation based on events or user actions, such as form submissions, button clicks, or state changes.

In React, React Router is the most commonly used library for routing, and it provides several ways to handle programmatic navigation. The most common methods are using the useNavigate hook (in React Router v6 and later) or the history object (in React Router v5).

---

1. Using useNavigate Hook (React Router v6+)

With React Router v6, the useHistory hook has been replaced with the useNavigate hook to perform programmatic navigation. The useNavigate hook allows you to navigate to different routes based on logic or events.

Installation (if React Router is not installed yet)

npm install react-router-dom

Example: Using useNavigate for Programmatic Navigation

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

const ProgrammaticNavButton = () => {
  const navigate = useNavigate();

  const handleClick = () => {
    // Navigate to another route programmatically
    navigate('/about');
  };

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

export default ProgrammaticNavButton;

Explanation:

• useNavigate(): This hook returns a function navigate, which is used to programmatically navigate to a different route.
• navigate('/about'): This line of code navigates to the /about route when the button is clicked.
• Flexible Navigation: You can also pass a relative path, or add a state to the navigation, like navigate('/home', { state: { fromDashboard: true } }).

---

2. Passing State with Navigation

Programmatic navigation can also pass state, which you can access from the destination route using the useLocation hook.

Example: Navigating with State

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

const NavigateWithState = () => {
  const navigate = useNavigate();

  const goToProfile = () => {
    navigate('/profile', { state: { fromDashboard: true } });
  };

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

export default NavigateWithState;

On the receiving page (e.g., /profile):

import React from 'react';
import { useLocation } from 'react-router-dom';

const ProfilePage = () => {
  const location = useLocation();
  const fromDashboard = location.state?.fromDashboard;

  return (
    <div>
      {fromDashboard && <p>You came from the dashboard!</p>}
      <h2>Profile Page</h2>
    </div>
  );
};

export default ProfilePage;

Explanation:

• State: You can pass state as part of the navigation object, which can be accessed in the target component using the useLocation hook.
• Optional Chaining: location.state?.fromDashboard ensures that we don’t get an error if the state is not passed.

---

3. Redirecting After an Action (e.g., After Form Submission)

You can also redirect users after an action is completed, such as after a form submission or an API request.

Example: Redirect After Form Submission

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

const FormComponent = () => {
  const [formData, setFormData] = useState({ name: '' });
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform form submission logic (e.g., API call)
    
    // Redirect after form submission
    navigate('/thank-you');
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="name"
        value={formData.name}
        onChange={(e) => setFormData({ name: e.target.value })}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default FormComponent;

Explanation:

• After the form is submitted, the user is redirected to the /thank-you page using navigate('/thank-you').

---

4. Using useHistory (React Router v5)

In React Router v5, useHistory is used to programmatically navigate. While React Router v6 encourages using useNavigate, useHistory is still widely used in v5.

Example: Using useHistory for Programmatic Navigation (React Router v5)

import React from 'react';
import { useHistory } from 'react-router-dom';

const ProgrammaticNavButton = () => {
  const history = useHistory();

  const handleClick = () => {
    // Navigate to another route programmatically
    history.push('/about');
  };

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

export default ProgrammaticNavButton;

Explanation:

• useHistory(): The history.push('/about') method navigates to the /about route when the button is clicked.
• Legacy API: This approach is specific to React Router v5, but useNavigate should be used in React Router v6 and above.

---

5. Navigating Programmatically Based on Conditions

You can navigate based on certain conditions, such as user authentication or form validation.

Example: Redirecting Based on Authentication

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

const LoginPage = () => {
  const navigate = useNavigate();

  const isAuthenticated = false; // Example condition

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

  return <div>Please log in</div>;
};

export default LoginPage;

Explanation:

• Conditional Navigation: If the user is authenticated, they are redirected to the /dashboard. Otherwise, they remain on the login page.

---

6. Replacing the Current History Entry

Sometimes, you may want to replace the current page in the browser’s history stack rather than adding a new entry.

Example: Replacing the Current Page

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

const ReplaceHistoryButton = () => {
  const navigate = useNavigate();

  const handleReplace = () => {
    navigate('/profile', { replace: true }); // Replaces the current entry in the history stack
  };

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

export default ReplaceHistoryButton;

Explanation:

• replace: true: This tells React Router to replace the current entry in the history stack with the new location, so users can’t navigate back to the previous page using the browser’s back button.

---