When you're building for the web, sometimes you need to pass information via the URL. To do this, you can use a query string.

You've probably seen them before IRL. Here's an example from Twitter's analytics page.

Now the thing is, how do we get those query strings from the url and into our component? React router gives us a hook that allows us to easily do that called 

const location = useLocation();
const { search } = location;
console.log(search); // "?filter=top&origin=im"

const { search } = useLocation();
console.log(search); // "?filter=top&origin=im"

But as you can see, that just gives us the actual string, not the params. You’d expect they’d provide it as an object that you can then destructure them from or something, but no, maybe on the next react-router version. For now, we have 2 ways of breaking this up:

const { search } = useLocation();
const params = new URLSearchParams(search);
const filter = params.get('filter');

import queryString from 'query-string'
import { useLocation } from 'react-router-dom'

const { search } = useLocation();
const { filter, origin } = queryString.parse(search);
console.log(filter) // "top"
console.log(origin) // "im"

Query Strings