1
votes

Le bouton de retour du navigateur ne fonctionne pas pour le projet gatsby.js

Quelqu'un sait-il pourquoi le bouton de retour ne fonctionne pas lors de l'utilisation de balises Link standard dans un projet Gatsby?

L'URL change mais l'itinéraire ne se met pas à jour.

Ceci est un projet wordpress source gatsby si cela permet de savoir. Toutes les pages wp sont créées avec la méthode createPage, et tout semble fonctionner comme prévu.

A l'inverse, j'ai un autre projet gatsby qui n'utilise pas la source wordpress. Sur ce projet, les boutons Précédent et Suivant du navigateur fonctionnent correctement. Donc, clairement, ce n'est pas que Gatsby lui-même brise cela par défaut. Mais dans mes inspections, je ne vois pas une raison fondamentale pour laquelle les configurations des deux projets ou quoi que ce soit d'autre causeraient cela. Ils sont presque identiques à l'exception de la partie wordpress source.

Quelqu'un d'autre a rencontré quelque chose comme ça?

gatsby browser

0 commentaires

3 Réponses :

1
votes

D'accord, pour tous ceux qui vivent cela - il ne fait aucun doute que votre recherche sur Google vous a conduit à la folie. Comment pouvons-nous être les seuls à nous en occuper? En effet, exaspérant.

Ne vous inquiétez pas, il y a un hack. Et oui, je suis sûr que c'est un hack total.

Dans votre fichier gatsby-browser.js, ajoutez ceci:

exports.onInitialClientRender = () => {
  window.addEventListener('popstate', () =>
    window.location.href = window.location.href
  )
}

WTF est ce fait , tu demandes? Cela force l'URL à se rediriger vers elle-même. Cela semble MORONIQUE, non? C'est le cas, sauf que cela ne se déclenche que lorsque vous utilisez la navigation du navigateur. Problème résolu, non? Non, pas vraiment. Le problème est masqué. Mais pour moi, cela suffit jusqu'à ce que quelqu'un ait une réponse réelle.

Pourquoi cette solution est-elle nulle? Parce que cela brise le concept de SPA. Vous n'êtes plus une seule page si vous y forcez un rechargement. Pour moi, je ne suis pas trop préoccupé uniquement parce que cela ne se produit que sur les clics de bouton avant et arrière. Mais s'il s'agissait d'un client de 50 000 $, je suis sûr que mon petit hack ne volerait pas avec eux.

Si quelqu'un a une solution Gatsby qui ne brise pas le modèle SPA, postez-la ici et je se fera un plaisir de vous transférer la réponse acceptée. Jusque-là ... piratez.

0 commentaires

3
votes

J'ai également rencontré ce problème. Cela a été tellement compliqué de s'attaquer à la cause profonde.

Je vous recommande également de consulter ce problème GitHub , où une autre solution de contournement est proposé.

@gurpreetatwal suggère d'ajouter ceci à gatsby-browser.js:

import {globalHistory} from '@reach/router';
export const onInitialClientRender = () => {
  /**
   * This is a workaround for a bug in Gatsby
   *
   * See https://github.com/gatsbyjs/gatsby/issues/8357 for more details
   */
  globalHistory._onTransitionComplete();
}

Selon son explication, il y a probablement un problème avec @ reach / router et Gatsby, où un état transitioning est défini sur true et oblige @ reach / router à remplacer l'historique au lieu de push à l'histoire. onTransitionComplete n'est appelé que dans le onComponentDidUpdate de @ reach / router, qui n'est pas souvent appelé lors de la navigation. Je m'en remettrai au problème pour plus d'explications et de mises à jour.

Ce que j'ai déduit, c'est que ce correctif permet d'appeler _onTransitionComplete () et permet de pousser sur l'historique lorsque la page change.

J'ai essayé votre solution ainsi que celle de @ gupreetatwal. Le principal avantage de la solution @gupreetatwa est qu'elle ne provoquera pas d'actualisation d'une page complète. Cela ressemble toujours à un hack pour le moment, mais c'est au moins une autre voie à essayer.

Ce problème nous a coûté des jours, alors j'espère que cela fera gagner du temps aux autres.

1 commentaires

Je vais essayer ça. Si cela fonctionne, je vous transférerai la réponse acceptée. Merci!

0
votes

J'ai eu le même problème dans mon projet mais pas pour tous les liens. J'ai essayé d'appliquer les solutions mentionnées ici mais cela avait l'inconvénient de tout recharger en revenant. J'ai continué mes recherches et j'ai trouvé quelque chose de fou, mais qui a fonctionné.

Faites-moi savoir si cela a fonctionné pour vous.

J'utilise un site WordPress comme source. Je faisais:

<Link to={`/help/${node.slug}`}>{node.title || null}</Link>

Il a été corrigé en supprimant le las "/". Comme ceci:

<Link to={`/help/${node.slug}/`}>{node.title || null}</Link>

0 commentaires