Mastering useParams in React Router (Easy-to-Follow Guide)

Before Using useParams

Alright, let's break it down in a simple way! Have you ever needed to build a page where the URL changes based on what the user clicks? Like a profile page that goes from /user/123 to /user/456? Manually pulling that 123 or 456 from window.location.pathname is a bit of a pain. That's where React Router's useParams comes in—it makes life a lot easier!

Handling Routes Before useParams Was Introduced

Back in the day (before React Router v5), we had to get these dynamic parts of the URL differently. Instead of hooks, we relied on props.

Example Using props.match.params

Here's how it was done in older React Router versions:

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

function UserProfile(props) {
  const userId = props.match.params.id; // Extracting from props
  return <h2>User ID: {userId}</h2>;
}

function App() {
  return (
    <Router>
      <Route path="/user/:id" component={UserProfile} />
    </Router>
  );
}

export default App;

The props.match.params.id grabbed the ID from the URL. This worked fine, but using hooks made things cleaner and more intuitive.

What is useParams?

useParams is a React Hook that grabs values from the URL when using React Router. Think of it as a shortcut to get URL parameters easily.

How to Use useParams

1️⃣ Install React Router

First, make sure you have React Router installed:

npm install react-router-dom

2️⃣ Set Up Routes

In App.js, define a route that expects a dynamic parameter:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import UserProfile from './UserProfile';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserProfile />} />
      </Routes>
    </Router>
  );
}

export default App;

3️⃣ Access URL Parameters with useParams

Now, in UserProfile.js, use useParams to grab the dynamic part of the URL:

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

function UserProfile() {
  const { id } = useParams(); // Extract 'id' from the URL
  return <h2>User ID: {id}</h2>;
}

export default UserProfile;

4️⃣ Test the Route

Run the app and visit:

http://localhost:3000/user/123

You should see:

User ID: 123

What Happens If useParams is Not Used?

If you don’t use useParams, you would have to manually extract values from window.location.pathname, which is messy and error-prone. Plus, it's just extra work you don’t need!

File-Based Routing vs React Router

While useParams simplifies React Router, many developers find file-based routing (like in Next.js) even easier. Instead of manually defining routes, you just create files, and the framework automatically maps them to URLs.

Example of File-Based Routing in Next.js

// pages/user/[id].js
import { useRouter } from 'next/router';

function UserProfile() {
  const router = useRouter();
  const { id } = router.query;
  return <h2>User ID: {id}</h2>;
}

export default UserProfile;

Here, just placing [id].js inside the pages/user/ folder automatically sets up the dynamic route /user/:id.

Why File-Based Routing is Easier

✅ No need to define routes manually
✅ Cleaner project structure
✅ Automatically handles nested routes
✅ Less boilerplate code

If you're working on a React project with routing, React Router is great, but if you want simplicity, file-based routing in frameworks like Next.js might be a better choice!

Summary

✅ Before useParams: We used props.match.params to access route parameters.
✅ After useParams: We can now use this hook to easily extract values from the URL.
✅ useParams simplifies working with dynamic routes like /user/:id.
✅ File-Based Routing: Frameworks like Next.js automatically map files to routes, making things even simpler.

🚀