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

Question

我在使用响应钩子的范围路由器方面遇到了一些问题。我需要在浏览器中捕获路线的参数我在可达路由器的网络中尝试了本机文档的道具，但这没有给我带来参数，路线是这样的：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将返回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"
const searchParams = parse(location.search)
// and
const location = useLocation()
const searchParams = parse(location.search) // => {init: "true"}