如何在Reach路由器上获取参数

Question

我在使用react hooks的reach router上遇到了一点问题。我需要在浏览器中捕获路由的参数，我尝试使用Web of reach路由器中的本机文档的道具，但这并没有给我参数，路由是这样的：http://localhost:8080/home?init=true

如何捕获该变量“init”？

Answer 1

Reach Router有一个useLocation钩子，你可以使用：

import { useLocation } from "@reach/router"
// then 
const location = useLocation()

在＜code＞位置。搜索是搜索字段，包含URL中的所有查询参数（查询字符串）。在您的示例中，/home？init=true将返回位置。搜索：“？init=true”，这是一个查询字符串。

您可以使用查询字符串库（yarn add query-string）来解析以下内容：

import { parse } from "query-string"
// then
const searchParams = parse(location.search)

这将给你对象{init：“true”}你也可以使用queryString.parse（'foo=true'，{parseBooleans：true}）解析布尔值

所以完整的例子应该是

import { useLocation } from "@reach/router"
import { parse } from "query-string"
// and
const location = useLocation()
const searchParams = parse(location.search) // => {init: "true"}

Answer 2

很快，我们大多数人每次都会重做这个，所以最好创建一个自定义钩子来做这件事。

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