Dynamic Routes and Route Params

🚀 What Are Dynamic Routes?

Dynamic routes allow you to build pages with variable paths — like user profiles, blog posts, or product pages — where part of the URL is dynamic. Instead of hardcoding each route, React Router lets you use placeholders to handle these cases smoothly. 🔄

🛠️ How to Define a Dynamic Route

You can define a dynamic segment in the route path using a colon (:), like this:

// App.js
import { Routes, Route } from 'react-router-dom';
import UserProfile from './pages/UserProfile';

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

Here, :id is a route parameter, which you can access inside the UserProfile component. This makes it possible to render different content based on the URL. 🔍

📥 Accessing Route Parameters with useParams

To get the dynamic value from the URL, use the useParams hook from react-router-dom:

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

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

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

For example, visiting /user/101 will display: User ID: 101. 📄

🔗 Creating Links to Dynamic Routes

To navigate to a dynamic route, use <Link /> or useNavigate with dynamic values:

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

<Link to="/user/123">View User 123</Link>

Or programmatically:

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

const navigate = useNavigate();
navigate(`/user/${userId}`);

📦 Practical Example: Blog Posts

Let’s say you have a blog, and you want each post to have a dynamic URL based on its slug:

// App.js
<Route path="/blog/:slug" element={<BlogPost />} />

// BlogPost.js
import { useParams } from 'react-router-dom';

function BlogPost() {
  const { slug } = useParams();
  return <h1>Reading: {slug.replace('-', ' ')}</h1>;
}

Now, visiting /blog/react-router-guide will render: Reading: react router guide. ✨

📑 Nested Dynamic Routes

You can also nest dynamic routes for complex structures:

// App.js
<Route path="/user/:id" element={<UserProfile />}>
  <Route path="settings" element={<UserSettings />} />
</Route>

Now, the URL /user/123/settings will render the UserSettings component nested inside UserProfile.

❌ Catching Invalid Params

Sometimes users may enter invalid route params. You can validate or redirect them using:

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

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

  if (isNaN(id)) return <Navigate to="/not-found" />;

  return <h1>Product ID: {id}</h1>;
}

🧠 Tips for Using Route Params

• 🧹 Always validate or sanitize route params before using them
• 🔁 Re-fetch data when param changes using useEffect
• 🧩 Combine route params with query strings if needed

📋 Summary

• ✅ Define dynamic paths using :paramName
• ✅ Use useParams() to access values inside components
• ✅ Programmatically navigate with useNavigate
• ✅ Combine with nested routes for advanced layouts
• ✅ Handle invalid params gracefully

🚀 Final Thoughts

Dynamic routes and route parameters give your React apps power and flexibility. Whether you’re building user dashboards, product pages, or blog platforms, understanding how to handle dynamic URLs is a must-have skill in any developer's toolkit. 🌐💡