14

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

如何捕获该变量“init”?

4

2 回答 2

18

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"}
于 2020-05-01T17:22:58.717 回答
16

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

    // 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);
    };
于 2020-06-01T14:15:24.040 回答