Dynamic Routes (useParams) in React JS Tutorial 🎯

Welcome back to CodeYourCraft! Today, we're diving into Dynamic Routes using useParams in React JS. Let's get started! 📝

What are Dynamic Routes?

Dynamic Routes are a powerful feature in React Router that allow us to create URLs with placeholders for dynamic data. This is particularly useful when we need to handle URLs that change dynamically based on user interaction or data fetched from an API.

Understanding useParams

useParams is a React Router hook that gives us access to the dynamic segments of the current route's URL. It's useful when we want to fetch and use dynamic data in our components.

Setting Up Dynamic Routes

First, let's set up a basic React app using Create React App.

bash

npx create-react-app dynamic-routes
cd dynamic-routes

Next, we'll install React Router:

bash

npm install react-router-dom

Now, let's create our first dynamic route. In the src folder, create a new file named BlogPost.js and another folder named posts. Inside the posts folder, create a file called [id].js.

💡 Pro Tip: Naming the [id].js allows us to create dynamic routes that can accept different id values in the URL.

BlogPost.js

jsx

import React, { useParams } from 'react';
import { Link, Route } from 'react-router-dom';
import BlogPost1 from './posts/1';
import BlogPost2 from './posts/2';

const BlogPost = () => {
  const { id } = useParams();

  let selectedPost;

  if (id === '1') {
    selectedPost = <BlogPost1 />;
  } else if (id === '2') {
    selectedPost = <BlogPost2 />;
  }

  return (
    <div>
      <h1>Blog Post</h1>
      <ul>
        <li>
          <Link to="/blog-post/1">Blog Post 1</Link>
        </li>
        <li>
          <Link to="/blog-post/2">Blog Post 2</Link>
        </li>
      </ul>
      {selectedPost}
    </div>
  );
};

export default BlogPost;

In the above code, we're importing useParams from React, and using it to extract the dynamic id from the current route's URL. We then create a conditional statement to render different blog posts based on the id.

BlogPost1 and BlogPost2

Now, let's create the content for the two blog posts. In the posts folder, create two files: 1.js and 2.js.

jsx

// BlogPost1.js
const BlogPost1 = () => <div><h2>Blog Post 1</h2><p>Content for Blog Post 1...</p></div>;

// BlogPost2.js
const BlogPost2 = () => <div><h2>Blog Post 2</h2><p>Content for Blog Post 2...</p></div>;

Now, in the App.js, let's set up our routes:

jsx

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import BlogPost from './BlogPost';
import BlogPost1 from './posts/1';
import BlogPost2 from './posts/2';

const App = () => (
  <Router>
    <Switch>
      <Route path="/" exact component={BlogPost} />
      <Route path="/blog-post/:id" component={BlogPost} />
      <Route component={NotFound} />
    </Switch>
  </Router>
);

export default App;

Here, we've set up two routes:

/: Displays the BlogPost component with a list of links to the dynamic routes.
/blog-post/:id: Matches any URL with the format /blog-post/[id] and renders the BlogPost component with the extracted id.

Testing Our Dynamic Routes

Now, start the development server:

bash

npm start

Navigate to http://localhost:3000 in your browser, and you should see our dynamic routes in action!

📝 Note: Replace the BlogPost1 and BlogPost2 content with your actual blog post content for a more practical example.

Quiz

That's it for today's lesson on Dynamic Routes using useParams in React JS! Stay tuned for more exciting topics on CodeYourCraft. 🎯 Happy coding! 🚀