Hola my fellow readers! Welcome to my first tech blog ever.

In my first blog, I will explore how to pass props with React Router (Dynamic Routing) and extract them using the useParams hook with short code snippets.

Let's start with an example. Suppose you have a Reactjs website that has many different items and you wish to redirect the user to any particular item's page based on the item id when the item link is clicked. You will probably think to create a component function for every item page.

But think, if you have 100 items on the page, you will have to create 100 component functions. Is it feasible?

Dynamic routing solves this problem by allowing us to conditionally render whatever page we want. We have to just create one (instead of 100) component function (in our code, Home is this component function) where we will use this dynamic routing and we will be able to route to any item's page through conditional rendering. This is where the useParams Hook and the concept of Passing Props with React Router come in!

But first we need to know, what is React Router?

React Router is a widely used library in the React ecosystem for handling client-side routing. It allows us to navigate between different views, manage the browser history, and pass props to components based on the current route.

One common scenario is passing data as props to a component rendered by a particular route.

Let's take a simple example to illustrate this. We have two components - Home and RouteComponent. Home is a table of data, and each row of the table is a link that navigates to RouteComponent, displaying the details of the row clicked.

1. App.js

In App.js, we define two routes using the Route component from react-router-dom. We use the component to define a set of routes, and each route is defined using the component.

The first route maps to the Home component and the second route maps to the RouteComponent component with a dynamic id parameter ":id", which is used to pass the ID of the row clicked in Home as a prop to RouteComponent.

Here is the code for App.js:

Now, let's focus on how the id prop is passed from Home to RouteComponent.

2. Home.js

In the Home component, we use the component from react-router-dom to create a link to the RouteComponent component with a dynamic id parameter. We pass the id parameter as a prop to the RouteComponent component in the link path like this:

As you can see here, we pass the ID as a parameter in the URL using template literals and the {item.id} property. In this case, we pass the {item.id} as the value of the id parameter.

Now, when the user clicks on this link, the App component routes to the RouteComponent component with the dynamic id parameter. The RouteComponent component extracts the id parameter using the useParams() hook from react-router-dom. I will show that later in this blog.

Now, let's look at the whole code for Home.js:

As shown above, in the Home component, we fetch data from an API and render a table with the fetched data.

3.RouteComponent.js

RouteComponent component also fetches data from the same API using axios and displays some information about the data with the specific id passed to it as a prop. In this component, we extract the id parameter using the useParams hook from react-router-dom. We then use this id to fetch and render data related to that id.

The useParams() hook returns an object with key-value pairs of URL parameters. In our case, the params object will have a key of id with the value of the dynamic id parameter passed in the URL. We store this value in the id variable using object destructuring like this -

Now, the id value is available as a prop in the RouteComponent component, and we can use it to fetch and display data specific to that id.

Finally let's have a look at the whole code of the RouteComponent.js--

So I hope the idea of passing props through React routing is clear now.

Conclusion

In this article, we have learned how to use React Router to pass props and use of useParams hook to implement dynamic routing. I hope this article has helped you understand this concept better.

Thanks for reading! Please share and like if you have enjoyed this article, also please share it with someone who might need this knowledge.

Hope to see you again on my blogs. Until, next time!

Cheers!