✅ Summary: Why URLs give strings, useParams(), and parseInt()

1️⃣ Why URLs give strings?

• Everything in a URL is text only.

• When React Router reads a URL, it gives values like "12", "100" as strings, not numbers.

• Example:
  URL:
  http://localhost:3000/user/15
15 → "15" (string)

---

2️⃣ What is useParams()?

• useParams() is a React Router hook.

• It returns all dynamic values from the URL.

• Example:

  const { id } = useParams();
  

• If your route is:

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

  And your URL is /user/10,
  then:

  id === "10"  // string
  

---

3️⃣ Why do we use parseInt() with useParams()?

Since URL params come as strings, but sometimes we need numbers, we convert them:

const { id } = useParams();
const userId = parseInt(id);     // "10" → 10

---

⭐ Final Combined Example

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

function User() {
  const { id } = useParams();        // id = "5"
  const userId = parseInt(id);       // userId = 5 (number)

  return (
    <h1>User ID: {userId}</h1>
  );
}

---

🔥 Quick Summary

• URLs only store strings, never numbers.

• useParams() gets the values from the URL but always as strings.

• parseInt() is used to convert URL values (strings) into numbers when needed.

---

If you want, I can also explain parseFloat(), Number(), or the difference between them!