如何在 Gatsby 中获取当前的 url？

Question

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

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

Answer 1

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

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

Answer 2

您可以使用 @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>
);

Answer 3

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

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

如果您以前没有使用过 props，那么这些是您可以在页面和组件中传递的东西（简化），我建议您查看如何使用它们。默认情况下，在 Gatsby 中，页面有一个位置路径名属性，所以你可以通过将其作为 prop 传递来告诉你的组件关于调用页面的那个位置。在英语中，这将是“使用此组件并将其位置设置为我的属性 "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} 位意味着在组件中，您的道具现在将有一个位置值，它将被设置为 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 上的任何内容。

Answer 4

您可以像这样使用useLocation like 建议：

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

如何在 Gatsby 中获取当前的 url？

How do I get the current url in Gatsby?

gatsby