web-dev-qa-db-fra.com

Comment obtenir l'URL actuelle de Gatsby?

Je suis en train de créer des boutons de partage avec Gatsby et je voudrais partager du contenu basé sur l'URL actuelle, qui change en fonction de l'environnement et de la page actuelle. Avec GoHugo, cela peut être appelé avec {{ .Permalink }}. Est-ce que quelqu'un sait comment faire ça avec Gatsby?

J'ai un composant ShareButtons, qui est un enfant de BlogPostTemplate.

gatsby
12
David

Gatsby utilise react-router derrière la scène, ce qui signifie que les informations de localisation sont disponibles dans les accessoires. Ces informations peuvent être utilisées dans une instruction conditionnelle ou transmises à des composants de style comme ceci:

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

11
fstep

Vous pouvez obtenir l'url actuelle en utilisant le prop location du @reach/routerLocation composant.

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

Si, comme moi, vous vouliez simplement savoir comment obtenir un uri "pour un composant" et tout ce problème vous a dérouté en raison de la complexité générale des solutions et de la documentation par rapport à ce simple besoin, une autre façon qui n'implique pas de comprendre atteindre le routeur (ce qui est une bonne chose à comprendre mais un peu difficile à obtenir simplement l'URI au moment de la construction) consiste à passer votre emplacement comme accessoire à partir d'une page. Cela fonctionne bien si vous souhaitez utiliser l'URI pour des choses comme la définition de defaultActiveKey sur bootstrap menus où le menu lui-même n'est pas le seul moyen d'accéder à cette page et donc "activeClassName" ne fonctionne pas toujours. Il fonctionne également au moment de la construction. Quoi qu'il en soit, il vous donne accès à l'uri dans un composant.

Je ne pense pas que cela fonctionnera pour les implémentations de type CMS sans tête, mais il existe d'autres façons de gérer cela.

Si vous n'avez pas beaucoup utilisé d'accessoires auparavant, ce sont des choses que vous pouvez faire circuler dans vos pages et composants (simplification) et je vous recommanderais de chercher comment les utiliser. Par défaut dans Gatsby, les pages ont une propriété de chemin d'accès d'emplacement afin que vous puissiez informer votre composant de cet emplacement à partir de la page d'appel en le passant comme accessoire. En anglais, ce serait "Utiliser ce composant avec son emplacement défini sur la propriété" location.pathname "de moi, la page d'appel". Le composant a maintenant l'emplacement.

Ce que vous devez faire est de créer une page comme ça

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

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

Pour les difficiles à penser (comme moi), le bit location = {props.location.pathname} signifie que dans le composant, vos accessoires auront désormais une valeur d'emplacement et il sera défini sur location.pathname de la page qui a appelé il. Par conséquent, dans votre composant Nav, vous avez maintenant accès à l'uri. N'oubliez pas que pour l'obtenir, votre composant doit recevoir des accessoires avant de pouvoir les utiliser. Le résultat est quelque chose comme ça (inutile de faire ça mais ça donne l'idée).

import React from "react"

const NavComponent = (props) => {
  return (

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

  )
}

export default NavComponent

Lorsque vous êtes sur APage, data-uri sera tout ce qui est pour APage et sur BPage, quoi que ce soit pour cela.

0
Greyridge Software