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

🏆 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!