如何在到达路由器上获取参数

Question

我在使用 react 钩子时对到达路由器有一个小问题。我需要在浏览器中捕获路由的参数，我尝试使用到达路由器网络中的本机文档的道具，但这并没有给我参数，路由是这样的： http://localhost:8080/home?init=true

如何捕获该变量“init”？

Answer 1

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

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

Inlocation.search是搜索字段，包含来自您的 URL 的所有查询参数（查询字符串）。在您的示例中，/home?init=true将 return location.search: "?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);
    };