如何在 Gatsby 中获取当前 url？答案

【问题标题】：How do I get the current url in Gatsby?如何在 Gatsby 中获取当前 url？
【发布时间】：2022-03-03 01:48:34
【问题描述】：

我目前正在使用 Gatsby 创建共享按钮，并希望根据当前 url 共享内容，该 url 会根据环境和当前页面而变化。使用 GoHugo，可以使用 {{ .Permalink }} 调用它。有谁知道如何用 Gatsby 做到这一点？

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

【问题讨论】：

我相信在像盖茨比这样的环境中是完全不同的。我想问的第一个问题是，究竟在哪个地方使用需要这些信息？因为它确实取决于并且在组件化的应用程序中，您可能需要从某个地方获取此信息并将其传递给其他组件。
感谢您的评论。我有一个 ShareButtons 组件，它是 BlogPostTemplate 的子组件。
我是这样做的：github.com/kbariotis/kostasbariotis.com/blob/master/src/…。基本上，我正在构建 URL 以便将其传递给共享组件。通常，在页面/模板组件上，您已经知道当前页面的 URL，因此您不需要变量。从那里，您只需将其传递给其他组件。

标签： gatsby

【解决方案1】：

您可以使用 @reach/router Location 组件中的 location 属性获取当前 url。

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { Location } from '@reach/router';

class SomeComponent extends Component {
  static propTypes = {
    location: PropTypes.object.isRequired
  }

  render() {
    const { location } = this.props;
    return <div>{JSON.stringify(location)}</div>;
  }
}

export default props => (
  <Location>
    {locationProps => <SomeComponent {...locationProps} {...props} />}
  </Location>
);

【讨论】：

工作得很好。请注意，这适用于 Gatsby v2。
对于FunctionComponent，我使用来自@reach/router 的useLocation() 钩子

【解决方案2】：

Gatsby 在幕后使用 react-router，这意味着位置信息在 props 中可用。此信息可以在条件语句中使用或传递到样式组件中，如下所示：

<Component isIndex={this.props.location.pathname === '/'}>

【讨论】：

这不再起作用，因为 Gatsby v2 用 @reach/router 替换了 react-router。现在怎么样了？
对于 Gatsby v2，文档中有很好的解释：gatsbyjs.com/docs/migrating-from-v1-to-v2/…

【解决方案3】：

你可以使用useLocation 像p.boiko 这样建议：

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", …}

【讨论】：

此解决方案也适用于非页面组件。

【解决方案4】：

如果像我一样，您只是想知道如何获取“组件”的 uri，而这整个问题让您感到困惑，因为与简单的需求相比，解决方案和文档的一般复杂性，另一种方式不涉及理解到达路由器（这是一件很容易理解的事情，但对于在构建时简单地获取 uri 有点繁重）是将您的位置作为页面中的道具传递。如果您想将 uri 用于诸如在引导菜单上设置 defaultActiveKey 之类的事情，这很有效，其中菜单本身不是访问该页面的唯一方式，因此“activeClassName”并不总是有效。它也可以在构建时工作。不管怎样，它使您可以访问组件中的 uri。

我认为这不适用于无头 CMS 类型的实现，但还有其他处理方法。

如果您之前没有经常使用道具，那么这些是您可以在页面和组件中传递的东西（简化），我建议您查看如何使用它们。默认情况下，在 Gatsby 中，页面具有位置路径名属性，因此您可以通过将其作为道具传递来从调用页面告诉您的组件该位置。在英语中，这将是“使用此组件，并将其位置设置为我的属性“location.pathname”，即调用页面”。组件现在有了位置。

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

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

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

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

import React from "react"

const NavComponent = (props) => {
  return (

        <Nav data-uri={props.location}>
        </Nav>  

  )
}

export default NavComponent

当您在 APage 上时，data-uri 将是 APage 和 BPage 上的任何内容。

【讨论】：