What is a query string?
A Query string is a portion of the URL where data is sent across the application to the server. e.g
https://localhost:3000/products?page=1&category=music
How do we write query string
URLs are stateless; they are not meant to transfer state between or around your application.
https://localhost:3000/products
URL can be followed with a query string and the first string is written
https://localhost:3000/products?page=1
#query string -> ?page=1
#data-> page=1
the key-value pair represent the data, where the first string is the key(variable name) and the second is the value. if there are more data to be transferred we add them preceded with an ampersand "&"
https://localhost:3000/products?page=1&category=music
#query string -> ?page=1&category=music
#data -> page=1 and category=music
How do we use query string in a React App
getting the data from a query string looks quite easy, understanding how the string looks like a basic javascript approach using the split array method would be...
const querystring=?page=1&category=music
const page=querystring.split("=")[0]
The cons of this approach:
- we have to force the user to input the string like "?page=1&category=music"
- if it goes otherwise like "?category=music&page=1" our app breaks.
Another better approach is using the URLSearchParams window object
Using URLSearchParams
const qString = window.location.search //?page=1&category=music
const searchParams= new URLSearchParams(qString)
const page = searchParams.get("page")
const category= searchParams.get("category")
we can make this better by turning it into custom hooks
function useQuery() {
const { search } = window.location;
return React.useMemo(() => new URLSearchParams(search), [search]);
}
function App(){
const queryString = useQuery()
const page = queryString.get("page")
const category = queryString.get("category")
return <div>...</div>
}
Thanks for reading, follow me for more posts.