如何在 Reach Router 上获取参数

Question

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

如何捕获该变量"init"？

Answer 1

Reach Router 有一个 useLocation 挂钩，您可以使用：

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

location.search 中是搜索字段，包含来自您的 URL 的所有查询参数（查询字符串）。在您的示例中，/home?init=true 将 return location.search: "?init=true"，这是一个查询字符串。

您可以使用 query-string 库 (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);
    };

如何在 Reach Router 上获取参数

How to get parameters on Reach Router

parameters

url

reactjs

reach-router