web-dev-qa-db-ja.com

ギャツビーで現在のURLを取得するにはどうすればよいですか？

現在、Gatsbyで共有ボタンを作成しています。現在のURLに基​​づいてコンテンツを共有したいのですが、URLは環境や現在のページによって異なります。 GoHugoでは、これは{{ .Permalink }}で呼び出すことができます。誰もがギャツビーでこれを行う方法を知っていますか？

BlogPostTemplateの子であるShareButtonsコンポーネントがあります。

gatsby
12
David

ギャツビーは、舞台裏で反応ルーターを使用しています。これは、位置情報が小道具で利用できることを意味します。この情報は、条件付きステートメントで使用するか、次のようにstyled-componentsに渡すことができます。

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

11
fstep

@reach/routerlocationコンポーネントから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>
);
19
Jam Risser

私のように、「コンポーネントの」URIを取得する方法を知りたいだけでしたが、この単純なニーズと比較したソリューションとドキュメントの一般的な複雑さ、理解を伴わない別の方法のため、この問題全体が混乱しましたリーチルーター（理解するのはいいことですが、ビルド時にURIを取得するだけでは少し重い）は、ページから小道具として場所を渡すことです。 bootstrapメニューのdefaultActiveKeyを設定するなどの目的でURIを使用する場合、これはうまく機能します。メニュー自体がそのページにアクセスする唯一の方法ではないため、「activeClassName」が常に機能するとは限りません。ビルド時にも機能しますが、コンポーネント内のURIにアクセスできます。

これはヘッドレスCMSタイプの実装では機能しないと思いますが、他の方法で対処できます。

以前に小道具をあまり使用したことがない場合、これらはページとコンポーネント（簡略化）を渡すことができるものであり、それらの使用方法を調べることをお勧めします。 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}ビットは、コンポーネント内で、小道具に場所の値が設定され、呼び出されたページの場所.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の場合と同じです。

0
Greyridge Software