What are query strings, how do they work, why do we need them?!
Let’s dive in!
Query strings are a way for us to store important information about the page we’re on outside the local state of our app.
This is important because if you want the page to be shareable and show the exact same information when it’s loaded on another device (i.e someone copies the URL and sends it to a friend), the URL is the only source of information that will remain constant. As such, it needs to contain everything we need.
Here’s an example url.
www.website.com/brand/product?size=lg&color=redWe can see that this url is split into a few parts, let’s break them down:
1) The domain: www.website.com
2) The path: /brand/product
3) The query string: ?size=lg&color=red
We’re not going to focus on how the domain and the path work, so let’s look at the query string.
A query string always starts with a ‘?’.
This is how we separate the path we’re currently on with the parameters we want to feed into our application.
Ie: /brand/product (path) | ? (separator) | color=red&size=lg (query string)
