Gatsby 如何获取盖茨比中的当前url？

我目前正在与盖茨比创建共享按钮，并希望根据当前url共享内容，该url会根据环境和当前页面的不同而变化。对于GoHugo，可以使用

{{.Permalink}

调用它。有人知道怎么和盖茨比做这件事吗

---

我有一个ShareButtons组件，它是BlogPostTemplate的子组件。

盖茨比在幕后使用react路由器，这意味着位置信息可以通过道具获得。此信息可以在条件语句中使用，也可以传递到样式化组件中，如下所示：

---

您可以使用

位置
道具从
@reach/router
位置
组件获取当前url

从“道具类型”导入道具类型；
从“React”导入React，{Component}；
从'@reach/router'导入{Location}；
类SomeComponent扩展组件{
静态类型={
位置：PropTypes.object.isRequired
}
render（）{
const{location}=this.props；
返回{JSON.stringify（location）}；
}
}
导出默认道具=>(
{locationProps=>}
);
如果你和我一样，你只是想知道如何获取“组件”的uri，而整个问题让你感到困惑，因为与简单的需求相比，解决方案和文档的总体复杂性，另一种不涉及理解的方式（这是一个很好的理解，但对于在构建时简单地获取uri来说有点沉重）是将您的位置作为一个页面的道具传递。如果您想在引导菜单上设置defaultActiveKey（其中菜单本身不是访问该页面的唯一方式）以及“activeClassName”上使用该uri，那么这将非常有效不总是有效的。它在构建时也有效。不管怎样，它允许您访问组件中的uri

我认为这对无头CMS类型的实现不起作用，但还有其他方法可以解决这个问题

如果您以前没有使用过很多道具，那么您可以在页面和组件中传递这些道具（简化）我建议您查看如何使用它们。默认情况下，在盖茨比中，页面具有location pathname属性，因此您可以通过将其作为道具传递，从调用页面告知组件该位置。在英语中，这将是“使用此组件，并将其位置设置为我的属性”location.pathname，调用页面“。组件现在具有位置

您需要做的是创建一个这样的页面

import React from "react"
import NavComponent from "../../components/navComponent"

const APage = (props) => {
  return (
     <NavComponent location={props.location.pathname}/>
  )
}
export default APage

从“React”导入React
从“../../components/NavComponent”导入NavComponent
const APage=（道具）=>{
返回(
)
}
导出默认APage

对于难以思考的人（像我一样），location={props.location.pathname}位意味着在组件中，您的道具现在将有一个位置值，它将被设置为调用它的页面的location.pathname。因此，在您的Nav组件中，您现在可以访问uri。记住，要获得它，您的组件需要先接收道具，然后才能使用它们。结果是这样的（这样做毫无意义，但它给出了想法）

从“React”导入React
常量导航组件=（道具）=>{
返回(
)
}
导出默认导航组件

当您在APage上时，数据uri将是APage的任何内容，而在BPage上，则是该内容的任何内容。
您可以像p.boiko建议的那样使用useLocation

import * as React from 'react';

import { useLocation } from '@reach/router';

const UserTheme = () => {
  const location = useLocation();
  console.log(location)  
};

产出将是：

{pathname: "/", search: "", hash: "", href: "http://localhost:8000/", origin: "http://localhost:8000", …}

我相信在像盖茨比这样的环境中，这是完全不同的。我想问的第一个问题是，用户到底在哪个地方需要这些信息？因为这真的取决于情况，而且在组件化的应用程序中，您可能需要从某个地方获取这些信息并将其传递给其他组件。谢谢您的评论。我有一个建议reButtons组件，它是BlogPostTemplate的子组件。我是这样做的：。基本上，我构建URL是为了将其传递给共享组件。通常，在页面/模板组件上，您已经知道当前页面的URL，因此不需要变量。从那里，您只需将其传递给其他组件。我知道了工作！感谢自从盖茨比v2用
@reach/router
取代了
react-router
后，这就不再工作了。现在是怎么做的？对于盖茨比v2，文档中有很好的解释：工作得很好。请注意，这是针对盖茨比v2的。对于
功能组件
我使用@reach/router的
useLocation（）
钩子
{pathname: "/", search: "", hash: "", href: "http://localhost:8000/", origin: "http://localhost:8000", …}