gatsby - 如何在 Gatsby 中获取当前 url？

Question

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

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

标签： gatsby

Answer 1

location您可以使用组件中的prop获取当前 url @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>
);