Reading URL Params by Using useParams

This lesson covers the function and implementation of the useParams hook. Before we tackle the useParams hook, we need to understand URL parameters (or URL params).

What is a URL param?

A path pattern is a combination of segments and dynamic segments. Consider the following URL:

https://example.com/contacts/:contactId

Here, contactId is the dynamic segment of the URL. In the following URL, 123 is the URL param.

https://example.com/contacts/123

URL params are the parsed values from the URL that match a dynamic segment. In our application, we’ll use this concept to render individual contact details.

Create a contact details component

We’ll create one component to display all the contact details when someone clicks on a contact name.

We need to create a file called ContactDetails.js in the components folder, as shown in the following coding widget.