Skip to main content

Dynamic Routing with URL Parameters (Part 1): Creating Dynamic Pages #93

📖 Introduction​

Following our exploration of basic routing components, this article delves into a more advanced and powerful feature of React Router: dynamic routing. We will learn how to create routes that can render different content based on parameters in the URL.

📚 Prerequisites​

Before we begin, please ensure you have a solid grasp of the following concepts:

  • All concepts from the previous articles in this series.
  • Basic JavaScript data types and objects.

🎯 Article Outline: What You'll Master​

In this article, you will learn:

  • ✅ The "Why" of Dynamic Routing: Understanding the need for dynamic routes in web applications.
  • ✅ URL Parameters: What they are and how to define them in a route.
  • ✅ Core Implementation: How to create a dynamic route for a user profile page.

🧠 Section 1: The Core Concepts of Dynamic Routing​

In many applications, you'll need to create pages for a collection of items, such as users, products, or articles. It would be impractical to create a separate route for each item. This is where dynamic routing comes in.

Dynamic routing allows you to create a single route that can render different content based on a URL parameter. For example, you can have a single UserProfile component that can render the profile for any user, based on their ID in the URL.

You can define a URL parameter in a route's path by prefixing it with a colon (:). For example, the path /users/:userId has a URL parameter called userId.

💻 Section 2: Deep Dive - Implementation and Walkthrough​

Let's create a dynamic route for a user profile page.

2.1 - The UserProfile Component​

First, let's create a simple UserProfile component. For now, it will just be a placeholder.

// UserProfile.js
import React from 'react';

function UserProfile() {
  return <h1>User Profile</h1>;
}

export default UserProfile;

2.2 - Defining the Dynamic Route​

Now, let's add a dynamic route to our App.js file.

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

function App() {
  return (
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/users/1">User 1</Link>
          </li>
          <li>
            <Link to="/users/2">User 2</Link>
          </li>
        </ul>
      </nav>

      <hr />

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users/:userId" element={<UserProfile />} />
      </Routes>
    </div>
  );
}

export default App;

Step-by-Step Code Breakdown:

  1. <Route path="/users/:userId" ... />: We've created a new route with a dynamic segment called userId.
  2. <Link to="/users/1"> and <Link to="/users/2">: We've added links to two different user profiles.

Now, if you click on the "User 1" or "User 2" links, the UserProfile component will be rendered for both. In the next article, we'll learn how to access the userId parameter in our UserProfile component to render different content for each user.

💡 Conclusion & Key Takeaways​

In this article, we've learned about dynamic routing and how to create a dynamic route with a URL parameter. This is a fundamental concept in building data-driven web applications.

Let's summarize the key takeaways:

  • Dynamic routing allows you to create a single route that can render different content based on a URL parameter.
  • You can define a URL parameter in a route's path by prefixing it with a colon (:).

Challenge Yourself: To solidify your understanding, try to create a dynamic route for a blog post that uses a postId parameter.

➡️ Next Steps​

You now have a basic understanding of how to create dynamic routes. In the next article, "Dynamic Routing with URL Parameters (Part 2)", we will learn how to access the URL parameters in our components using the useParams hook.

Thank you for your dedication. Stay curious, and happy coding!

glossary​

  • Dynamic Routing: A routing strategy where the route is determined at runtime based on the URL.
  • URL Parameter: A variable part of a URL that is used to pass data to the application.

Further Reading​