How to get parameters on Reach Router
In no time, most of us will be redoing this everytime, so it's best to create a custom hook just to do this.
// A custom hook that builds on useLocation to parse
// the query string for you.
export const useQuery = queryParam => {
const search = new URLSearchParams(useLocation().search);
return search.get(queryParam);
};
Reach Router has a useLocation hook you can use:
import { useLocation } from "@reach/router"
// then
const location = useLocation()
In location.search
is the search field, containing all the query parameters (query strings) from your URL. In your example, /home?init=true
would return location.search: "?init=true"
, which is a query string.
You can use query-string library (yarn add query-string
) to parse this:
import { parse } from "query-string"
// then
const searchParams = parse(location.search)
which would give you object
{init: "true"}
you could also parse booleans with queryString.parse('foo=true', {parseBooleans: true})
So the full example would be
import { useLocation } from "@reach/router"
import { parse } from "query-string"
// and
const location = useLocation()
const searchParams = parse(location.search) // => {init: "true"}