How to get parameters on Reach Router

Question

I've a little problem with reach router, using react hooks. I need capture the params of the route in the browser I tried with props of the native documentation in the web of reach router but that is not giving me the param, the route is this: http://localhost:8080/home?init=true

How to capture that variable "init"?

https://stackoverflow.com/questions/43216569/how-to-get-query-parameters-in-react-router-v4 — Subin Sebastian, Oct 21 '19 at 19:32
Yeah! Is correct! But, my question is based on reach router, not react router — David Acevedo, Oct 21 '19 at 20:59

score 21 · Answer 1 · edited Jan 31 '23 at 08:36

21

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

edited Jan 31 '23 at 08:36

Anurag Srivastava

14,077
4
33
43

answered Jun 01 '20 at 14:15

Asim K T

16,864
10
77
99

7

This should be the answer, as it's the only one that doesn't require an additional library. – bildungsroman Feb 25 '21 at 22:39

score 19 · Accepted Answer · edited May 18 '20 at 16:47

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"}

How to get parameters on Reach Router

2 Answers2