Reading URL Params by Using useParams
Learn about URL params and their usage by implementing them in the contact list app.
We'll cover the following...
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.