Lesson 22 — useParams & useNavigate Explained (Dynamic Routing)

Introduction 😊

In the previous lesson, you learned how to:

• Set up routing using BrowserRouter
• Define routes using Routes and Route

Now let’s move one step deeper 🚀

In real-world applications, we often need to:

• Open a user profile by ID
• Navigate to a page after login
• Redirect users programmatically

React Router provides two powerful hooks for this:

• useParams
• useNavigate

In this lesson, you will learn:

• What dynamic routes are
• What useParams is and how it works
• What useNavigate is and how it works
• Step-by-step examples
• Common beginner mistakes

Let’s begin 💡

What Are Dynamic Routes? 🤔

A dynamic route is a route where part of the URL changes.

Example URLs:

/users/1
/users/2
/products/101

Here:

• 1, 2, 101 are dynamic values

👉 React Router lets us capture these values using useParams.

What Is useParams? 🔍

useParams is a React Router hook used to read dynamic values from the URL.

👉 In simple words:

useParams helps you extract parameters from the URL.

Step 1️⃣: Create a Dynamic Route 🛣️

<Route path="/user/:id" element={<User />} />

Here:

• :id is a route parameter

Step 2️⃣: Read URL Parameter Using useParams 📦

import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();

  return <h2>User ID: {id}</h2>;
}

📌 If URL is:

/user/5

👉 Output:

User ID: 5

Real-World Use Case of useParams 🌍

useParams is commonly used for:

• User profile pages
• Product details pages
• Blog post pages
• Survey or result pages

Example:

<Route path="/product/:productId" element={<Product />} />

What Is useNavigate? 🚀

useNavigate is a React Router hook that allows programmatic navigation.

👉 In simple words:

useNavigate lets you move to another page using JavaScript.

Basic useNavigate Example 🧭

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

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

  return (
    <button onClick={() => navigate("/login")}>
      Go to Login
    </button>
  );
}

👉 Clicking the button navigates to /login.

Navigate After Form Submission 📝

A very common use case.

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

  function handleLogin() {
    // login logic
    navigate("/dashboard");
  }

  return <button onClick={handleLogin}>Login</button>;
}

✔ Clean
✔ No page reload
✔ Professional behavior

Navigate Back or Forward ⏪⏩

navigate(-1); // Go back
navigate(1);  // Go forward

👉 Uses browser history.

useParams vs useNavigate ⚖️

Combining useParams + useNavigate 🔗

function Product() {
  const { id } = useParams();
  const navigate = useNavigate();

  return (
    <>
      <h2>Product ID: {id}</h2>
      <button onClick={() => navigate("/")}>
        Back to Home
      </button>
    </>
  );
}

👉 Very common in real apps.

Common Beginner Mistakes ❌

• Forgetting : in route path
• Using useParams without defining dynamic route
• Using useNavigate outside Router
• Calling navigate incorrectly

💡 Always check your route paths first.

Important Notes 📌

• useParams returns strings, not numbers
• Always validate param values
• useNavigate works only inside BrowserRouter

Conclusion 🎯

useParams and useNavigate are essential tools for building real-world React apps.

Key takeaways:

• useParams reads dynamic URL values
• useNavigate handles redirects
• Both hooks simplify routing logic
• Required for dashboards, profiles, and forms

👉 If routing is navigation, these hooks are your steering wheel 🚗💨

Frequently Asked Questions (FAQs) ❓

Can I use multiple params?

Yes. Example: /user/:id/:role

Is useNavigate a replacement for Link?

No. Link is for UI navigation, useNavigate is for logic.

Can I use these hooks in class components?

No. Hooks work only in function components.

What’s Next? 🚀

👉 In the next lesson, we will learn:

Lesson 23 — Protected Routes in React
Restricting access based on authentication.