Query Strings

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.