How to get parameters on Reach Router How to get parameters on Reach Router reactjs reactjs

How to get parameters on Reach Router


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"// thenconst 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"// andconst location = useLocation()const searchParams = parse(location.search) // => {init: "true"}


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);    };