Reading URL Params by Using useParams
Learn about URL params and their usage by implementing them in the contact list app.
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.
Get hands-on with 1200+ tech skills courses.