Question

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

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

Answer 1

盖茨比在幕后使用反应路由器，这意味着位置信息在道具中可用。此信息可以在条件语句中使用，也可以传递给样式化组件，例如：

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

Answer 2

您可以使用location @reach/router组件中的Location道具来获取当前网址。

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

你可以像 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", …}

Answer 4

如果像我一样，您只是想知道如何为组件“获取” uri，整个问题使您感到困惑，因为与简单的需求相比，解决方案和文档的总体复杂性不涉及了解到达路由器（这是一件很容易理解的事情，但是对于在构建时仅获取uri来说有点繁重）是将您的位置作为道具从页面传递。如果您想将uri用于引导菜单上设置defaultActiveKey，该菜单本身不是访问该页面的唯一方法，因此“ activeClassName”并不总是起作用，则此方法非常有用。它也可以在构建时使用。无论如何，它使您可以访问组件中的uri。

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

如果您以前没有使用过道具，那么可以在页面和组件中进行传递（简化），我建议您查找如何使用它们。默认情况下，在Gatsby中，页面具有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

为了不易思考（像我一样），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上的所有内容。

如何获得盖茨比的当前网址？

4 个答案: