Query Strings
Learn about and implement query strings in the search component of a React application.
We'll cover the following
Introduction to the query string
The URL is more than just a website’s address. We can use the URL to send data, such as tokens and cookies, across different web pages.This can be achieved with a query string in conjunction with react-router
, which we’ll explore in this lesson.
What is a query string?
The query string is the part of the URL that sends information to a webpage. It’s comprised of the parameter
(name) and its value
, which are separated by the equal (=) sign in the URL.
Consider the following example:
www.example.com/?key_name=value
The question mark (?
) separates the query string from the base URL. We can use an ampersand (&
) to separate multiple queries as shown below:
www.example.com/?key_name1=value1&key_name2=value2
The react-router
provides different ways to use query strings, which we explain in greater detail throughout this (and subsequent) lesson.
Updating the search component
Let’s open the Search.js
file from the coding widget given in the exercise section and add all the contact names below the search input. Next, we open the App.js
file and add the contactDetails
component inside the search
route as a child route. This should be the same as the /contacts
route. We can copy and paste the ul
element from the Contacts.js
file. We can also call the getContacts
function to get all the contacts values.
Get hands-on with 1200+ tech skills courses.