React Router Navigation and Redirects | Code Boost
Description: Building Dynamic Navigation in React with React Router Building dynamic React applications often requires controlling how users move between different sections of your website. Rea...

Article

# React Router Navigation and Redirects

By Matt · Mar 24, 2024

# Building Dynamic Navigation in React with React Router

Building dynamic React applications often requires controlling how users move between different sections of your website. React Router is a powerful library that simplifies routing, but it also provides tools for programmatic navigation (using `useNavigate`) and automatic redirects (using `<Navigate>`). In this post, we’ll explore both concepts and see how they work in practice, especially with the latest version of React Router (v6).

## 🚀 React Router Navigation

Click here to deploy, manage, and scale cloud applications EASY with $200 credit

### What is `useNavigate`?

The `useNavigate` function in React Router lets you change the current URL and trigger navigation within your React app programmatically, even from event handlers or effects.

#### Basic Usage

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

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

      const handleButtonClick = () => {
        navigate('/profile', { replace: true }); // Redirect to "/profile" and replace history
      };

      return (
        <button onClick={handleButtonClick}>Go to Profile</button>
      );
    }

### Common Use Cases

✅ Form Submissions: Redirect users to a success page after submitting a form. ✅ Data Fetching: Navigate to a details page after loading data. ✅ Event Handling: Trigger navigation after a button click.

### Options

- `replace: true` → Replaces the current history entry instead of adding a new one (prevents back button navigation to the previous form page).

## 🔀 React Router Redirects

### Redirecting in React Router v6

Redirects automatically send users to another route based on conditions.

#### React Router v5 (Older Method)

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

    <Route path="/old-page">
      <Redirect to="/new-page" />
    </Route>

#### React Router v6 (Updated Method)

✅ Using `<Navigate>` (for in-component redirects)

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

    function HomePage() {
      const isLoggedIn = false; // Example condition
      if (!isLoggedIn) {
        return <Navigate to="/login" replace />; // Redirects to login page
      }
      return <h1>Welcome to Home</h1>;
    }

✅ Using `useNavigate` Hook (for redirects outside components or complex logic)

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

    function Dashboard() {
      const navigate = useNavigate();
      useEffect(() => {
        if (!localStorage.getItem("user")) {
          navigate('/login'); // Redirect if user is not logged in
        }
      }, []);
      return <h1>Dashboard</h1>;
    }

## 🔥 Advanced React Router Techniques

### 1️⃣ Form Submissions with Feedback

This example shows how to redirect after submitting a form while handling errors:

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

    function OrderForm() {
      const navigate = useNavigate();
      const [submissionStatus, setSubmissionStatus] = useState(null);

      const handleSubmit = async (formData) => {
        try {
          await fetch('/api/orders', {
            method: 'POST',
            body: JSON.stringify(formData)
          });
          setSubmissionStatus('success');
          navigate('/order-success', { state: { formData } });
        } catch (error) {
          setSubmissionStatus('error');
        }
      };
    }

### 2️⃣ Data Fetching with Loading States

If data fetching fails, redirect to a "Not Found" page:

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

    function ProductPage() {
      const { productId } = useParams();
      const navigate = useNavigate();
      const [product, setProduct] = useState(null);
      const [isLoading, setIsLoading] = useState(true);

      useEffect(() => {
        async function fetchData() {
          const response = await fetch(`/api/products/${productId}`);
          const data = await response.json();
          setProduct(data);
          setIsLoading(false);
        }
        fetchData();
      }, [productId]);

      if (isLoading) return <div>Loading...</div>;
      if (!product) return <Navigate to="/not-found" />;
    }

## 🛠️ Troubleshooting Common Issues

### ✅ Common Redirect Problems & Fixes

Problem | Solution
--- | ---
Infinite Redirect Loop | Ensure redirect condition eventually resolves (e.g., `isLoggedIn` state changes)
Losing Query Parameters | Use `useLocation()` to capture and append existing parameters
Navigating without Page Refresh | Ensure navigation is inside a React component using `useNavigate()`
Back Button Issues | Use `{ replace: true }` to prevent users from going back to a previous form page
Redirect Flash Before Data Loads | Implement a loading state (`useState`) before triggering a redirect

##

## 🏆 Key Points

✅ Use `useNavigate()` for programmatic navigation. ✅ Use `<Navigate>` inside JSX for conditional redirects. ✅ Prevent infinite loops by properly structuring conditions. ✅ Preserve query parameters with `useLocation()`. ✅ Implement loading states to prevent redirect flashes. 🚀 Next Steps: Try these techniques in your projects and refine your navigation experience!